/* ========================================================================== BRAND ========================================================================== */ .brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); font-size: var(--t-md); font-weight: 600; align-self: start; } .brand:hover { color: var(--accent-text); } /* ========================================================================== RAIL SECTION Generic labeled section used by the theme toggle and search controls. ========================================================================== */ .rail-section { display: flex; flex-direction: column; gap: var(--s-3); } .rail-section-label { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.10em; } /* ========================================================================== THEME TOGGLE Light/dark segmented control in the rail. State is driven by the `data-theme` attribute on and aria-pressed on each option. ========================================================================== */ .rail-actions { display: flex; align-items: center; gap: var(--s-2); align-self: start; } .theme-toggle { display: inline-flex; align-items: stretch; height: var(--control-h); padding: 4px; gap: 2px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-md); } /* Touch viewports: grow the toggle so each option becomes a 44×44 hit area (WCAG 2.5.5). Desktop pointers keep the tighter 40px size. */ @media (pointer: coarse) { .theme-toggle { height: 52px; } } .theme-option { width: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-mute); border-radius: 6px; } .theme-option:hover { color: var(--ink-dim); } .theme-option[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); } [data-theme="dark"] .theme-option[aria-pressed="true"] { background: var(--surface-3); } .theme-option svg { width: 18px; height: 18px; } /* ========================================================================== RAIL SEARCH Client-side title/source/author filter. Sits below the theme toggle. ========================================================================== */ .rail-search { position: relative; width: 100%; } .search-input { appearance: none; -webkit-appearance: none; width: 100%; box-sizing: border-box; height: var(--control-h); margin: 0; /* Left padding clears the leading icon (12px gutter + 16px icon + 12px text gap). Right padding clears the clear-button so long queries never slide under it. */ padding: 0 38px 0 40px; font-family: inherit; /* 16px (--t-base) prevents iOS Safari from auto-zooming on focus and matches the comfort of the taller field. */ font-size: var(--t-base); line-height: 1.2; color: var(--ink); background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-md); outline: none; } .search-input::placeholder { color: var(--ink-mute); } .search-input:hover { border-color: var(--rule-strong); background: var(--surface); } .search-input:hover::placeholder { color: var(--ink-mute); } .search-input:focus, .search-input:focus-visible { border-color: var(--accent); background: var(--surface); } .search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { appearance: none; } /* Leading magnifier. Decorative — sits behind the input via pointer-events:none so clicks always land on the field. Tints to accent on focus via :has(). */ .search-icon { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-ghost); pointer-events: none; } .search-icon svg { width: 16px; height: 16px; } .rail-search:hover .search-icon { color: var(--ink-mute); } .rail-search:has(.search-input:focus) .search-icon { color: var(--accent); } .search-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-mute); cursor: pointer; } /* Visual stays 26×26 to nest cleanly inside the input; ::before extends the tap area to ≥44×44 to satisfy WCAG 2.5.5. */ .search-clear::before { content: ''; position: absolute; inset: -9px; } .search-clear svg { width: 14px; height: 14px; } .search-clear:hover { color: var(--ink); background: var(--surface-3, var(--surface-2)); } .search-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--ink); } /* ========================================================================== FILTERS Source filter section in the rail. ========================================================================== */ .filters { display: flex; flex-direction: column; gap: var(--s-3); container: filters / inline-size; } /* ----------
toggle (mobile) ---------- The filters element is a
so on narrow viewports it collapses behind a tappable summary ("Sources · N · M active"). On desktop the summary is hidden and JS keeps `open` set so the body always shows. Keeps the rail compact on mobile without amputating filter access. */ .filters-toggle { display: flex; align-items: center; gap: var(--s-2); height: var(--control-h); padding: 0 var(--s-3); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.10em; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-md); cursor: pointer; list-style: none; } .filters-toggle::-webkit-details-marker { display: none; } .filters-toggle:hover { border-color: var(--rule-strong); background: var(--surface); } .filters-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .filters-toggle-count { color: var(--ink-mute); } .filters-toggle-active { color: var(--accent-text); } .filters-toggle-active:empty { display: none; } .filters-toggle-chevron { margin-left: auto; width: 14px; height: 14px; color: var(--ink-mute); transition: transform 200ms var(--ease-out); } .filters[open] .filters-toggle-chevron { transform: rotate(180deg); } .filters-body { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-3); } /* Desktop: filters are always expanded; the summary collapses to nothing and the body stays visible regardless of the `open` attribute (kept set by JS for sanity, but the chrome here doesn't depend on it). */ @media (min-width: 880px) { .filters-toggle { display: none; } .filters-body { padding-top: 0; } } .filters-header { display: flex; align-items: center; gap: var(--s-2); } .filters-label { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; } .filters-clear { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 1px; border-bottom: 1px solid var(--rule); } .filters-clear:hover { color: var(--accent-text); border-color: var(--accent); } .filters-list { display: flex; flex-direction: column; gap: 2px; margin: 0; } .filter-chip { display: flex; align-items: center; gap: var(--s-2); padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink-mute); font-size: var(--t-sm); font-weight: 400; } /* Touch viewports: chips grow via padding to satisfy WCAG 2.5.5 AAA tap targets, and the list loosens so siblings don't collide under fat-finger taps. */ @media (pointer: coarse) { .filters-list { gap: 4px; } .filter-chip { padding: 13px 10px; } } .filter-chip:hover { color: var(--accent-text); background: var(--surface-2); } .filter-chip-active { color: var(--accent-text); background: var(--accent-soft); } .filter-chip-active:hover { color: var(--accent-text); background: var(--accent-soft); } .filter-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-count { flex-shrink: 0; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .filter-chip-active .filter-count { color: var(--accent-text); opacity: 0.75; } /* Wrap-pill layout when the filters container has room (mobile full-width) */ @container filters (min-width: 340px) { .filters-list { flex-direction: row; flex-wrap: wrap; gap: 6px; } .filter-chip { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--rule); background: transparent; } .filter-chip:hover { color: var(--accent-text); border-color: var(--accent); background: var(--surface-2); } .filter-chip-active { border-color: var(--accent); background: var(--accent-soft); } .filter-chip-active:hover { border-color: var(--accent); background: var(--accent-soft); } .filter-name { flex: 0 0 auto; overflow: visible; } .filter-count { padding-left: 2px; color: inherit; opacity: 0.5; } } /* ========================================================================== ITEM LIST Ranked story rows in the main column. ========================================================================== */ .list { display: flex; flex-direction: column; } .item { border-top: 1px solid var(--rule); position: relative; opacity: 0; transform: translateY(6px); animation: item-in 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 38ms + 140ms); display: flex; align-items: center; gap: var(--s-3); } .item:last-child { border-bottom: 1px solid var(--rule); } .item-row { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; align-items: start; transition: background-color 150ms var(--ease-out); } .rank { font-family: var(--f-mono); font-size: var(--t-md); font-weight: 500; color: var(--ink-mute); letter-spacing: 0.04em; padding-top: 2px; transition: color 160ms var(--ease-out); font-variant-numeric: tabular-nums; } .item-body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); } .title { font-family: var(--f-sans); font-size: var(--t-title); font-weight: 500; line-height: 1.28; color: var(--ink); letter-spacing: -0.014em; text-wrap: balance; transition: color 150ms var(--ease-out); } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; } .meta-sep { color: var(--ink-ghost); } .meta-source { color: var(--ink-dim); } .meta-author { text-transform: none; letter-spacing: 0.02em; font-weight: 400; color: var(--ink-mute); } /* ---------- Visited (external URL in browser history) ---------- Browsers heavily restrict what can be applied to :visited (only color-like properties) for privacy. `:has(:visited)` is also blocked, so we style the row anchor's descendants directly. Rules must come before :hover so the hover rules win via source order. */ .item-row:visited .title { color: var(--ink-mute); } .item-row:visited .rank { color: var(--ink-ghost); } /* ---------- Hover ---------- Hover on .item (row OR ai button) lights up the whole unit so the row and its trailing AI button read as one target. */ .item:hover .title { color: var(--accent-text); } .item:hover .rank { color: var(--ink-dim); } .item:hover .item-ai-btn { border-color: var(--accent); } /* ---------- AI analysis button ---------- Sibling of the row anchor (not nested inside it — buttons inside anchors confuse click handling). Sits flush right of the row, opens the reader pane via onAnalyzeClick. Visual is 40×40 with ::before extending the hit area to 44×44 (WCAG 2.5.5). */ .item-ai-btn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); } .item-ai-btn::before { content: ''; position: absolute; inset: -2px; } .item-ai-btn:hover { border-color: var(--accent); } .item-ai-btn:focus-visible { outline: none; border-color: var(--accent); } .item-ai-btn:disabled { cursor: progress; opacity: 0.85; } .item-ai-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 240ms var(--ease-expo); } /* Hover tilt only when idle — when loading, the spin animation owns the transform and a static hover rule would freeze it mid-rotation. */ .item-ai-btn:not([data-loading="true"]):hover svg { transform: rotate(15deg) scale(1.06); } @keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ai-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .item-ai-btn[data-loading="true"] svg { animation: ai-spin 900ms linear infinite; transition: none; } /* Reduced-motion override lives in base.css alongside the universal motion nuke — kept colocated so the !important chain is auditable in one place. */ /* ---------- Mobile row ---------- */ @media (max-width: 640px) { .item-row { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; } .rank { font-size: var(--t-sm); padding-top: 3px; } } /* ========================================================================== EMPTY STATE ========================================================================== */ .empty { padding: var(--s-8) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); animation: fade-in 500ms var(--ease-out) 200ms both; display: flex; flex-direction: column; gap: var(--s-2); } .empty-title { font-family: var(--f-sans); font-size: var(--t-lg); font-weight: 500; color: var(--ink); letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; } .empty-sub { font-size: var(--t-base); font-weight: 400; color: var(--ink-mute); max-width: 44ch; } /* ========================================================================== PAGINATION ========================================================================== */ .pagination { padding-top: var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; animation: fade-in 500ms var(--ease-out) 700ms both; } .page-link { display: inline-block; padding: 6px 12px; font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 500; color: var(--ink-dim); border: 1px solid var(--rule); border-radius: var(--r-sm); letter-spacing: 0.02em; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); } .page-link:hover { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); } .page-link-disabled { color: var(--ink-mute); border-color: var(--rule); background: transparent; cursor: default; pointer-events: none; } .page-indicator { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.10em; font-variant-numeric: tabular-nums; } /* ========================================================================== READER PANE Right-column article summary: empty state, skeleton, rendered article, error state. ========================================================================== */ /* ---------- Empty & error cards ---------- */ .reader-empty, .reader-error { color: var(--ink-mute); padding: var(--s-7) var(--s-6); background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-lg); text-align: center; } .reader-empty-title, .reader-error-title { font-weight: 600; color: var(--ink); margin-bottom: var(--s-2); } .reader-empty-sub { font-size: var(--t-sm); color: var(--ink-mute); } /* ---------- Skeleton (loading state) ---------- */ .reader-skeleton { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) 0; } .skel { background: var(--rule); border-radius: var(--r-sm); height: 14px; animation: pulse 1.6s ease-in-out infinite; } .skel.w60 { width: 60%; } .skel.w70 { width: 70%; } .skel.w80 { width: 80%; } .skel.w90 { width: 90%; } @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } /* ---------- Article-row skeleton (main column) ---------- */ .skel-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--rule); align-items: start; } .skel-row:last-child { border-bottom: 1px solid var(--rule); } .skel-rank { width: 22px; height: 14px; margin-top: 4px; } .skel-body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; } .skel-title { height: 18px; } .skel-meta { height: 10px; width: 40%; margin-top: 2px; } /* ---------- Article ---------- */ .reader-article { animation: fade-in 220ms var(--ease-out) both; } /* ---------- Close button ---------- */ .reader-close { position: absolute; top: var(--s-4); right: var(--s-4); width: 32px; height: 32px; display: none; align-items: center; justify-content: center; padding: 0; color: var(--ink-mute); background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; z-index: 60; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); } body.reader-open .reader-close { display: inline-flex; } .reader-close:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--surface); } .reader-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .reader-close svg { width: 16px; height: 16px; } /* Give article header room so the title never slides under the close button */ body.reader-open .reader-head { padding-right: calc(32px + var(--s-3)); } .reader-head { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); } .reader-title { font-family: var(--f-sans); font-size: var(--t-lg); line-height: 1.25; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; text-wrap: balance; } .reader-meta { color: var(--ink-mute); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; display: flex; gap: var(--s-2); flex-wrap: wrap; text-transform: uppercase; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } .reader-toolbar { display: flex; gap: var(--s-3); } .reader-original { color: var(--accent-text); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out); } .reader-original:hover { color: var(--accent-text); border-color: var(--accent); } /* ---------- TL;DR ---------- Typography-only lead paragraph. A small uppercase mono eyebrow sits above a larger sans lead — the type alone signals "this is the scan." No card, no stripe, no background. */ .reader-tldr { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); } .reader-tldr-eyebrow { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.12em; } .reader-tldr-body { font-family: var(--f-sans); font-size: var(--t-md); line-height: 1.5; font-weight: 500; color: var(--ink); } /* ---------- Section list ---------- */ .reader-sections { display: flex; flex-direction: column; gap: var(--s-6); } .reader-section-heading { font-family: var(--f-sans); font-size: var(--t-md); font-weight: 600; color: var(--ink); margin-bottom: var(--s-3); letter-spacing: -0.01em; } .reader-bullets { padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--s-2); color: var(--ink-dim); } .reader-bullets li { line-height: 1.55; font-size: var(--t-base); } /* ---------- Footnote ---------- */ .reader-footnote { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; } /* ---------- Retry button ---------- */ .reader-retry { margin-top: var(--s-3); padding: 6px 12px; font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 500; color: var(--ink-dim); background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-sm); letter-spacing: 0.02em; cursor: pointer; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); } .reader-retry:hover { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); } /* ========================================================================== ITEM LIST — three-column mode When the reader is a sibling column, the list sits in a narrower gutter. Compact titles + selected-row indicator. ========================================================================== */ @media (min-width: 1280px) { .item .title { font-size: var(--t-base); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } /* Title compresses in three-column mode — rank compresses with it so baseline alignment holds. */ .item .rank { font-size: var(--t-base); padding-top: 2px; } .item { padding-right: var(--s-3); transition: background-color 150ms var(--ease-out); } .item-row { padding: var(--s-4); gap: var(--s-3); } .item:hover, .item.selected { background: var(--surface-2); } }