/* ====================================================================== THEME SYSTEM Four selectable styles. Each is just a set of CSS variable overrides keyed off html[data-theme="..."] — nothing else in the CSS below contains a raw color value or a hardcoded font name, so a 5th theme can be added just by copying one of these blocks and changing values. The JS theme switcher toggles the `data-theme` attribute on . ====================================================================== */ :root{ /* ============ THEME: Newspaper (default) ============ */ /* -- Page background -------------------------------------------- */ --color-bg: #f2eedf; /* -- Surfaces (cards, panels, grid cells) ------------------------ */ --color-surface: #f2eedf; /* board cells, detail box background */ --color-surface-alt: #e7e0c7; /* header bands: grid headers, stat boxes */ /* -- Text & rules ------------------------------------------------- --color-ink is used for BOTH primary text and strong/heavy border lines (masthead rules, table borders, section dividers). */ --color-ink: #1c1a15; /* primary text + strong border/rule color */ --color-ink-muted: #54503f; /* secondary text: subtitles, captions, meta */ --color-ink-faint: #948d76; /* faintest text: dashes, placeholders */ --color-hairline: #d7cfb2; /* lightest divider lines */ /* -- Accent (use sparingly) --------------------------------------- */ --color-accent: #8c2b23; /* selected-cell outline + emphasis text */ /* -- Heatmap gradient (grid cells colored by game count; JS reads these two variables directly, so they drive the whole board). Capped at a medium tone (not full black) so the cell numbers, which always use --color-ink, stay legible at every shade. --- */ --heat-min: #f2eedf; /* cell color for the LOWEST game count */ --heat-max: #a9884f; /* cell color for the HIGHEST game count */ /* -- Type -------------------------------------------------------- */ --font-display: 'Playfair Display', Georgia, serif; /* masthead, big numbers */ --font-body: 'PT Serif', Georgia, serif; /* labels, captions, body */ --font-mono: 'Courier Prime', monospace; /* grid + box score tables */ /* -- Shape --------------------------------------------------------- */ --radius: 0px; /* stat boxes, board frame, detail box, buttons */ --cell-radius: 0px; /* individual grid cells (kept small on purpose) */ --hairline-width: 1px; /* grid cell borders, table dividers */ --masthead-border-style: double; --masthead-border-width: 5px; } /* ============ THEME: Neon Pop Comic ============ */ html[data-theme="comic"]{ --color-bg: #fff8e7; --color-surface: #ffffff; --color-surface-alt: #ffe14d; --color-ink: #14121a; --color-ink-muted: #4a4458; --color-ink-faint: #a89bb0; --color-hairline: #14121a; --color-accent: #ff2e6e; --heat-min: #4dd9ff; --heat-max: #ff2e6e; --font-display: 'Bangers', cursive; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'Space Mono', monospace; --radius: 10px; --cell-radius: 3px; --hairline-width: 2px; --masthead-border-style: solid; --masthead-border-width: 4px; } /* ============ THEME: Crimson ============ */ html[data-theme="crimson"]{ --color-bg: #170808; --color-surface: #220c0c; --color-surface-alt: #3a1414; --color-ink: #f5e6d3; --color-ink-muted: #c9a896; --color-ink-faint: #7a5449; --color-hairline: #4a1f1f; --color-accent: #e0272f; --heat-min: #220c0c; --heat-max: #e0272f; --font-display: 'Bebas Neue', sans-serif; --font-body: 'Libre Baskerville', serif; --font-mono: 'IBM Plex Mono', monospace; --radius: 2px; --cell-radius: 0px; --hairline-width: 1px; --masthead-border-style: solid; --masthead-border-width: 3px; } /* ============ THEME: Purple / Green ============ */ html[data-theme="purplegreen"]{ --color-bg: #180f26; --color-surface: #211632; --color-surface-alt: #2f1f47; --color-ink: #eafbe7; --color-ink-muted: #a99bc4; --color-ink-faint: #6b5e85; --color-hairline: #3d2a55; --color-accent: #39ff9c; --heat-min: #2f1f47; --heat-max: #24915f; --font-display: 'Orbitron', sans-serif; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'Space Mono', monospace; --radius: 8px; --cell-radius: 2px; --hairline-width: 1px; --masthead-border-style: solid; --masthead-border-width: 3px; } /* ====================================================================== */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background-color:var(--color-bg); color:var(--color-ink); font-family:var(--font-body); min-height:100vh; -webkit-font-smoothing:antialiased; transition:background-color 0.2s ease, color 0.2s ease; } .page{ max-width:1080px; margin:0 auto; padding:30px 20px 90px; } /* ---------- Theme switcher ---------- */ .theme-switcher{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:20px; } .ts-label{ font-family:var(--font-body); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-ink-muted); margin-right:2px; } .theme-btn{ font-family:var(--font-body); font-size:11px; letter-spacing:0.03em; padding:6px 13px; border:1px solid var(--color-ink); background:var(--color-surface); color:var(--color-ink); border-radius:var(--radius); cursor:pointer; } .theme-btn:hover{filter:brightness(1.1);} .theme-btn:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;} .theme-btn.active{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-bg); font-weight:700; } /* ---------- Masthead ---------- */ .masthead{ border-top:var(--masthead-border-width) var(--masthead-border-style) var(--color-ink); border-bottom:var(--masthead-border-width) var(--masthead-border-style) var(--color-ink); padding:16px 0 18px; text-align:center; } .masthead-row{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-body); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-ink-muted); border-bottom:1px solid var(--color-ink); padding-bottom:9px; margin-bottom:12px; } h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(38px, 7.2vw, 66px); line-height:0.98; letter-spacing:0.005em; margin:2px 0 8px; color:var(--color-ink); } .sub{ margin:0 auto 12px; color:var(--color-ink-muted); font-size:13.5px; font-style:italic; max-width:520px; line-height:1.55; } .dateline{ font-family:var(--font-body); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-ink-muted); border-top:1px solid var(--color-ink); padding-top:9px; margin-top:6px; } .stat-strip{ display:flex; flex-wrap:wrap; border:1px solid var(--color-ink); border-radius:var(--radius); overflow:hidden; margin-top:22px; } .stat{ flex:1 1 160px; padding:12px 16px; border-right:1px solid var(--color-hairline); background:var(--color-surface-alt); text-align:center; } .stat:last-child{border-right:none;} .stat .num{ font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--color-ink); line-height:1; display:block; } .stat .lbl{ font-family:var(--font-body); font-size:9.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--color-ink-muted); display:block; margin-top:5px; } /* ---------- Section label ---------- */ .section-label{ display:flex; align-items:center; gap:12px; font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-ink); margin:30px 0 12px; } .section-label::before, .section-label::after{ content:''; flex:1; height:1px; background:var(--color-ink); } /* ---------- Board section ---------- */ .board-section{margin-bottom:10px;} /* Sizes to the board's own content, then centers that whole block (top-axis label + left-axis label + grid) in the available width. */ .board-block{ width:fit-content; max-width:100%; margin:0 auto; } .axis-top-label{ font-family:var(--font-body); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-ink-muted); margin:0 0 8px 66px; } .board-outer{ display:flex; align-items:center; gap:0; } .axis-left-label{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-body); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-ink-muted); white-space:nowrap; padding:4px 0; flex-shrink:0; align-self:center; } /* The board is a fixed, finite dataset (2025 season is over, no more scores will be added), so the board sizes itself exactly to its content instead of stretching to fill available space or capping height with a scroll box. It only scrolls horizontally, and only if the viewport is too narrow to show it in full. */ .board-scroll{ border:1px solid var(--color-ink); border-radius:var(--radius); background:var(--color-surface); width:fit-content; max-width:100%; overflow:auto; flex:0 1 auto; min-width:0; } .board-grid{ display:grid; grid-auto-rows:32px; width:max-content; /* A visible gap (showing the grid's own background color through it) separates every cell from its neighbors, regardless of how close two adjacent heat colors happen to be -- a border on the cell itself can blend into a similarly-shaded neighbor, but a gap of fixed background color never does. */ gap:var(--hairline-width); background:var(--color-hairline); } .gcell{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family:var(--font-mono); font-size:11.5px; background:var(--color-surface); } .corner{ position:sticky; top:0; left:0; z-index:5; background:var(--color-surface-alt); box-shadow:inset -2px -2px 0 0 var(--color-ink); font-size:8px; color:var(--color-ink-muted); letter-spacing:0.02em; text-align:center; line-height:1.15; } .head-col{ position:sticky; top:0; z-index:4; background:var(--color-surface-alt); color:var(--color-ink); font-weight:700; box-shadow:inset 0 -2px 0 0 var(--color-ink); } .head-row{ position:sticky; left:0; z-index:4; background:var(--color-surface-alt); color:var(--color-ink); font-weight:700; box-shadow:inset -2px 0 0 0 var(--color-ink); } /* Point 10: hovering a data cell highlights its column + row headers so you can trace back to the axis labels without counting cells. */ .head-col.axis-hover, .head-row.axis-hover{ background:var(--color-accent); color:var(--color-bg); } button.cell{ font-family:var(--font-mono); cursor:pointer; border:none; color:var(--color-ink); font-weight:700; border-radius:var(--cell-radius); transition:filter 0.1s ease, box-shadow 0.1s ease; } /* Hover feedback is color-only (brightness + inset ring) — no size change, so hovering cells along the board's edges can't push the scroll container's content bounds and pop a scrollbar in/out. */ button.cell:hover{ z-index:2; filter:brightness(1.15); box-shadow:inset 0 0 0 1px var(--color-ink); } button.cell:focus-visible{ outline:2px solid var(--color-accent); outline-offset:-2px; z-index:3; } button.cell.zero-count{ background:var(--color-surface); border:1px dashed var(--color-ink-faint) !important; color:var(--color-ink-faint); font-size:9px; } button.cell.selected{ box-shadow:inset 0 0 0 2px var(--color-accent); z-index:3; } .cell-impossible{ background-image:repeating-linear-gradient(45deg, var(--color-surface) 0 3px, var(--color-hairline) 3px 4px); } .legend{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; margin-top:12px; font-family:var(--font-body); font-size:11px; color:var(--color-ink-muted); } .legend-item{display:flex; align-items:center; gap:7px;} .legend-swatch{width:15px; height:15px; flex-shrink:0; border:1px solid var(--color-ink-faint); border-radius:var(--cell-radius);} .zero-swatch{background:var(--color-surface); border:1px dashed var(--color-ink-faint);} .imp-swatch{background-image:repeating-linear-gradient(45deg, var(--color-surface) 0 2px, var(--color-hairline) 2px 3px); border:1px solid var(--color-ink-faint);} .legend-scale{ display:flex; height:15px; width:110px; overflow:hidden; border:1px solid var(--color-ink-faint); border-radius:var(--cell-radius); } .legend-scale div{flex:1;} /* ---------- Detail section ---------- */ .detail-section{ border:1px solid var(--color-ink); border-radius:var(--radius); background:var(--color-surface); min-height:130px; } .detail-placeholder{ padding:38px 20px; text-align:center; color:var(--color-ink-faint); font-size:13px; font-style:italic; letter-spacing:0.02em; } .detail-header{ display:flex; align-items:baseline; gap:16px; padding:14px 20px; border-bottom:2px solid var(--color-ink); flex-wrap:wrap; } .detail-score{ font-family:var(--font-display); font-size:40px; font-weight:900; color:var(--color-ink); line-height:1; } .detail-count{ font-size:13px; font-style:italic; color:var(--color-ink-muted); } .detail-count b{color:var(--color-ink); font-style:normal;} .detail-empty{ padding:32px 20px; color:var(--color-ink-muted); font-size:13px; line-height:1.6; } .detail-empty b{color:var(--color-accent);} .game-list{ display:flex; flex-direction:column; max-height:560px; overflow:auto; } .game-card{ padding:14px 20px; border-bottom:1px solid var(--color-hairline); } .game-card:last-child{border-bottom:none;} .game-card-top{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:9px; } .game-teams{ font-family:var(--font-body); font-size:14.5px; color:var(--color-ink-muted); font-weight:400; } .game-teams .win{color:var(--color-ink); font-weight:700;} .game-meta{ font-size:10.5px; color:var(--color-ink-muted); display:flex; gap:10px; align-items:center; font-family:var(--font-body); } .badge{ display:inline-block; font-size:9px; letter-spacing:0.07em; padding:2px 6px; border:1px solid var(--color-ink-muted); color:var(--color-ink-muted); border-radius:var(--cell-radius); } table.linescore{ border-collapse:collapse; font-family:var(--font-mono); font-size:11px; width:100%; } table.linescore th, table.linescore td{ text-align:center; padding:4px 6px; border-bottom:1px solid var(--color-hairline); min-width:20px; } table.linescore th{ color:var(--color-ink-muted); font-weight:700; font-size:10px; } table.linescore td.team-name{ text-align:left; color:var(--color-ink); font-weight:700; white-space:nowrap; padding-right:12px; } table.linescore td.dash{color:var(--color-ink-faint);} table.linescore td.rhe{ color:var(--color-ink); font-weight:700; } table.linescore td.sep, table.linescore th.sep{border-left:2px solid var(--color-ink);} .game-sub{ margin-top:7px; font-size:10.5px; font-style:italic; color:var(--color-ink-faint); } .foot{ margin-top:26px; font-family:var(--font-body); font-size:10px; letter-spacing:0.06em; color:var(--color-ink-faint); text-align:center; border-top:1px solid var(--color-hairline); padding-top:14px; } .foot-copyright{ margin-top:10px; font-size:10.5px; font-style:italic; letter-spacing:0.01em; line-height:1.6; color:var(--color-ink-muted); max-width:480px; margin-left:auto; margin-right:auto; } .foot-copyright a{ color:var(--color-ink-muted); } .foot-disclaimer{ margin-top:10px; font-size:10.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--color-ink); } /* ---------- Per-theme flourishes ---------- */ /* Comic: halftone dot texture over the yellow header bands, and a slightly bouncy, tilted headline. */ html[data-theme="comic"] .masthead-row, html[data-theme="comic"] .stat, html[data-theme="comic"] .head-col, html[data-theme="comic"] .head-row, html[data-theme="comic"] .corner{ background-image:radial-gradient(rgba(20,18,26,0.18) 1.3px, transparent 1.6px); background-size:7px 7px; } html[data-theme="comic"] h1{ letter-spacing:0.03em; display:inline-block; transform:rotate(-1.2deg); } /* Crimson: poster-style uppercase masthead, accent-colored rule. */ html[data-theme="crimson"] h1{ text-transform:uppercase; letter-spacing:0.05em; } html[data-theme="crimson"] .masthead{ border-color:var(--color-accent); } /* Purple/Green: neon glow on headline, section labels and the selected-cell / detail-score highlights. */ html[data-theme="purplegreen"] h1{ text-shadow:0 0 18px var(--color-accent), 0 0 3px var(--color-accent); } html[data-theme="purplegreen"] .section-label{ text-shadow:0 0 6px var(--color-accent); } html[data-theme="purplegreen"] .detail-score{ text-shadow:0 0 10px var(--color-accent); } html[data-theme="purplegreen"] button.cell.selected{ box-shadow:inset 0 0 0 2px var(--color-accent), 0 0 10px var(--color-accent); } @media (max-width:600px){ .detail-score{font-size:32px;} .board-outer{flex-direction:column; align-items:flex-start;} .axis-left-label{writing-mode:horizontal-tb; transform:none; align-self:flex-start; padding:0 0 4px;} .masthead-row{flex-direction:column; gap:4px; align-items:center; text-align:center;} } /* ---------- Cross-page navigation (year pages + hub) ---------- */ .year-nav{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:var(--font-body); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:18px; flex-wrap:wrap; } .year-nav a{ color:var(--color-ink); text-decoration:none; border:1px solid var(--color-ink); padding:6px 13px; border-radius:var(--radius); } .year-nav a:hover{filter:brightness(1.1);} .year-nav a.disabled{ color:var(--color-ink-faint); border-color:var(--color-hairline); pointer-events:none; } .year-nav .hub-link{font-weight:700;} .year-nav .side-links{display:flex; gap:8px;} /* ---------- Hub: year index grouped by decade ---------- */ .year-index{margin-top:6px;} .decade-group{margin-bottom:16px;} .decade-label{ font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-ink-muted); margin-bottom:8px; } .decade-years{display:flex; flex-wrap:wrap; gap:6px;} .year-chip{ font-family:var(--font-mono); font-size:12px; padding:5px 9px; border:1px solid var(--color-hairline); border-radius:var(--cell-radius); color:var(--color-ink); text-decoration:none; background:var(--color-surface); } .year-chip:hover{filter:brightness(1.1); box-shadow:inset 0 0 0 1px var(--color-ink);} .linescore-note{ font-size:10.5px; font-style:italic; color:var(--color-ink-faint); margin-top:6px; } .detail-meta{ font-size:11.5px; color:var(--color-ink-muted); padding:0 20px 16px; } .detail-meta b{color:var(--color-ink);} /* ---------- Tie cells (diagonal wr==lr) ---------- */ button.cell.tie-cell{ box-shadow:inset 0 0 0 2px var(--color-accent); } button.cell.tie-cell:hover{ box-shadow:inset 0 0 0 2px var(--color-accent), inset 0 0 0 1px var(--color-ink); } button.cell.tie-cell.selected{ box-shadow:inset 0 0 0 3px var(--color-accent); } .badge.tie-badge{ border-color:var(--color-accent); color:var(--color-accent); } /* ---------- Hub: year-breakdown list (replaces the old first/last-only summary; also what fills the detail panel's width properly) -------- */ .year-breakdown{ padding:14px 20px 18px; } .year-breakdown-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-top:10px; } .year-breakdown-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--color-hairline); border-radius:var(--cell-radius); text-decoration:none; background:var(--color-surface); font-family:var(--font-mono); font-size:12px; color:var(--color-ink); } .year-breakdown-item:hover{ filter:brightness(1.08); box-shadow:inset 0 0 0 1px var(--color-ink); } .year-breakdown-item .yb-year{font-weight:700;} .year-breakdown-item .yb-count{color:var(--color-ink-muted);} .year-breakdown-item.yb-tie{box-shadow:inset 0 0 0 1px var(--color-accent);} /* ---------- Hub: date-range selector ---------- */ .range-selector{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:14px; padding:12px 16px; border:1px solid var(--color-ink); border-radius:var(--radius); background:var(--color-surface-alt); font-family:var(--font-body); font-size:11.5px; } .range-selector label{ color:var(--color-ink-muted); letter-spacing:0.06em; text-transform:uppercase; font-size:10px; margin-right:6px; } .range-selector select{ font-family:var(--font-mono); font-size:13px; padding:5px 8px; border:1px solid var(--color-ink); border-radius:var(--cell-radius); background:var(--color-surface); color:var(--color-ink); } .range-selector .range-sep{color:var(--color-ink-faint);} .range-btn{ font-family:var(--font-body); font-size:11px; letter-spacing:0.03em; padding:6px 12px; border:1px solid var(--color-ink); background:var(--color-surface); color:var(--color-ink); border-radius:var(--radius); cursor:pointer; } .range-btn:hover{filter:brightness(1.1);} .range-btn.active{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-bg); font-weight:700; } .range-note{ font-size:10.5px; font-style:italic; color:var(--color-ink-muted); width:100%; } /* Year-index chips dim when outside the active range filter */ .year-chip.out-of-range{ opacity:0.35; } /* ---------- Point 1: score search box ---------- */ .tools-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; } .search-box{ display:flex; align-items:center; gap:6px; border:1px solid var(--color-ink); border-radius:var(--radius); padding:5px 6px 5px 12px; background:var(--color-surface); } .search-box label{ font-family:var(--font-body); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-ink-muted); } .search-box input{ font-family:var(--font-mono); font-size:13px; width:80px; border:none; background:transparent; color:var(--color-ink); outline:none; } .search-box button{ font-family:var(--font-body); font-size:11px; padding:5px 11px; border:1px solid var(--color-ink); border-radius:var(--cell-radius); background:var(--color-ink); color:var(--color-bg); cursor:pointer; } .search-box button:hover{filter:brightness(1.15);} .search-note{ font-size:10.5px; font-style:italic; color:var(--color-ink-faint); width:100%; margin-top:-2px; } .search-note.search-error{color:var(--color-accent); font-style:normal;} /* ---------- Action buttons: surprise me / on this day / calendar ---------- */ .action-btn{ font-family:var(--font-body); font-size:11px; letter-spacing:0.02em; padding:6px 13px; border:1px solid var(--color-ink); border-radius:var(--radius); background:var(--color-surface); color:var(--color-ink); cursor:pointer; } .action-btn:hover{filter:brightness(1.1);} .date-picker-wrap{ display:flex; align-items:center; gap:6px; border:1px solid var(--color-ink); border-radius:var(--radius); padding:5px 10px; background:var(--color-surface); } .date-picker-wrap label{ font-family:var(--font-body); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-ink-muted); } .date-picker-wrap input[type="date"]{ font-family:var(--font-mono); font-size:12.5px; border:none; background:transparent; color:var(--color-ink); } /* ---------- Point 2: scorigami-first (all-time-debut) toggle ---------- */ .toggle-row{ display:flex; align-items:center; gap:8px; margin-top:10px; font-family:var(--font-body); font-size:11.5px; color:var(--color-ink-muted); } .toggle-switch{ position:relative; width:34px; height:18px; border:1px solid var(--color-ink); border-radius:999px; background:var(--color-surface); cursor:pointer; flex-shrink:0; } .toggle-switch .knob{ position:absolute; top:1px; left:1px; width:14px; height:14px; border-radius:50%; background:var(--color-ink); transition:left 0.15s ease; } .toggle-switch.on{background:var(--color-accent); border-color:var(--color-accent);} .toggle-switch.on .knob{left:17px; background:var(--color-bg);} /* the marker itself: an outline (independent of box-shadow, so it layers cleanly on top of the tie-cell ring and selected state) plus a small corner dot -- shown ONLY when the toggle above is on. */ button.cell.scorigami-first{ outline:2px solid gold; outline-offset:-2px; } button.cell.scorigami-first::after{ content:''; position:absolute; top:2px; right:2px; width:5px; height:5px; border-radius:50%; background:gold; } button.cell{position:relative;} /* ---------- Point 3: team filter ---------- */ .team-filter{ display:flex; align-items:center; gap:8px; } .team-filter label{ font-family:var(--font-body); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-ink-muted); } .team-filter select{ font-family:var(--font-mono); font-size:12.5px; padding:6px 8px; border:1px solid var(--color-ink); border-radius:var(--cell-radius); background:var(--color-surface); color:var(--color-ink); max-width:220px; } /* ---------- Point 4: "link copied" toast ---------- */ .copy-toast{ font-size:10.5px; font-style:italic; color:var(--color-accent); opacity:0; transition:opacity 0.2s ease; } .copy-toast.show{opacity:1;} /* ---------- Point 6: highest-count highlight + sort toggle ---------- */ .year-breakdown-item.yb-top{ box-shadow:inset 0 0 0 2px var(--color-accent); font-weight:700; } .yb-header-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .sort-toggle{ display:flex; gap:2px; border:1px solid var(--color-ink); border-radius:var(--cell-radius); overflow:hidden; } .sort-toggle button{ font-family:var(--font-body); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; padding:4px 9px; border:none; background:var(--color-surface); color:var(--color-ink-muted); cursor:pointer; } .sort-toggle button.active{ background:var(--color-ink); color:var(--color-bg); font-weight:700; } /* ---------- Date-based (calendar / on-this-day) results list ---------- */ .date-results-note{ padding:0 20px 4px; font-size:11.5px; font-style:italic; color:var(--color-ink-muted); } /* ---------- Point 6: scope badges (clarify site-wide vs page-scoped) --- */ .scope-badge{ display:inline-block; font-family:var(--font-body); font-size:8px; letter-spacing:0.07em; text-transform:uppercase; padding:2px 5px; border:1px solid var(--color-ink-faint); border-radius:3px; color:var(--color-ink-muted); margin-left:7px; vertical-align:middle; white-space:nowrap; } /* ---------- Point 8: preferences visibility + settings page ---------- */ .pref-hidden{ display:none !important; } .settings-link{ font-family:var(--font-body); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-ink-muted); text-decoration:none; border:1px solid var(--color-hairline); border-radius:var(--radius); padding:6px 12px; } .settings-link:hover{ filter:brightness(1.1); color:var(--color-ink); } .settings-section{ border:1px solid var(--color-ink); border-radius:var(--radius); background:var(--color-surface); margin-bottom:18px; } .settings-section-title{ font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-ink); padding:12px 18px; border-bottom:1px solid var(--color-hairline); } .settings-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--color-hairline); } .settings-row:last-child{ border-bottom:none; } .settings-row-text{ flex:1; } .settings-row-label{ font-family:var(--font-body); font-size:13.5px; color:var(--color-ink); font-weight:700; } .settings-row-desc{ font-family:var(--font-body); font-size:11.5px; color:var(--color-ink-muted); margin-top:2px; } .settings-reset{ margin-top:6px; }