/* FactWatch tokens now SOURCE from kiri-ux (loaded via kiri-ux/tokens/themes/ * base.css + factwatch.css before this file). These aliases keep every existing * FactWatch class working while removing all hardcoded hex — the migration goal. * Change a kiri-ux token and FactWatch follows. Light mode comes free via * . (kiri-ux migration 2026-06-04) */ /* Material-on-paper: in light mode white cards lift off the ivory page with a * soft warm shadow + hairline border (Anthropic + Google aesthetic). */ [data-theme="light"] .claim-card, [data-theme="light"] .card-news, [data-theme="light"] .section-card, [data-theme="light"] .claim-hero, [data-theme="light"] .run-detail, [data-theme="light"] .stat-box, [data-theme="light"] .source-card { box-shadow: 0 1px 2px hsl(38 28% 32% / 0.06), 0 2px 8px hsl(38 28% 32% / 0.06); } [data-theme="light"] .claim-card:hover, [data-theme="light"] .card-news:hover, [data-theme="light"] .source-card:hover { box-shadow: 0 2px 4px hsl(38 28% 32% / 0.08), 0 6px 16px hsl(38 28% 32% / 0.10); } :root { --verdict-true: var(--color-viz-positive); --verdict-false: var(--color-viz-negative); --verdict-misleading: var(--color-viz-caution); --verdict-unverified: var(--color-viz-neutral); --verdict-outdated: var(--color-viz-stale); --verdict-disputed: var(--color-viz-special); --bg-primary: var(--color-surface); --bg-card: var(--color-surface-raised); --bg-elevated: var(--color-surface-active); --text-primary: var(--color-on-surface); --text-muted: var(--color-on-surface-muted); --accent: var(--color-primary-text); --border: var(--color-border); /* --space-1..4 and --radius-sm are identical names+values in kiri-ux — * inherited directly, not re-aliased (a self-reference would be circular). * Only the names that differ from kiri-ux are mapped here. */ --radius: var(--radius-md); /* 8px */ --space-6: var(--space-5); /* FactWatch 24px → kiri-ux space-5 */ --space-8: var(--space-6); /* FactWatch 32px → kiri-ux space-6 */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg-primary); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Layout ────────────────────────────────────────────── */ .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); } header { border-bottom: 1px solid var(--border); padding: var(--space-6) 0; margin-bottom: var(--space-8); } header .container { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .site-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } .site-tagline { color: var(--text-muted); font-size: 0.9rem; } .header-nav { display: flex; gap: var(--space-6); font-size: 0.9rem; } main { padding-bottom: var(--space-8); } footer { border-top: 1px solid var(--border); padding: var(--space-6) 0; margin-top: var(--space-8); color: var(--text-muted); font-size: 0.85rem; } footer .container { display: flex; gap: var(--space-6); flex-wrap: wrap; justify-content: space-between; align-items: center; } /* ── Last updated bar ──────────────────────────────────── */ .last-updated { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-6); color: var(--text-muted); font-size: 0.875rem; display: flex; align-items: center; gap: var(--space-2); } .last-updated .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verdict-true); display: inline-block; } select { cursor: pointer; } select:focus { outline: 2px solid var(--accent); } /* trending & view badges on cards */ .trend-badge { font-size:1rem; } .view-count { font-size:0.72rem; color:var(--text-muted); background:var(--bg-elevated); border-radius:999px; padding:1px 8px; } /* ── Compact top filters (small, unobtrusive) ──────────────── */ .filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); } .filter-select { font-size: 0.8rem; padding: var(--space-1) var(--space-3); color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); } .filter-select:hover { color: var(--text-primary); border-color: var(--accent); } @media (max-width: 768px) { .filters { width: 100%; } .filter-select { flex: 1; min-width: 0; } } /* ── Claims grid ───────────────────────────────────────── */ .claims-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--space-2); } /* ── Claim card — news article style ──────────────────────── */ .claim-card { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border); /* coloured by verdict via JS */ border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-3) var(--space-4); cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; flex-direction: column; gap: 6px; } .claim-card:hover { background: var(--bg-elevated); } .claim-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .claim-title { font-size: 0.95rem; font-weight: 600; line-height: 1.35; flex: 1; color: var(--text-primary); } .claim-card-bottom { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--text-muted); flex-wrap: wrap; } .verdict-badge { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; } .verdict-true { background: color-mix(in srgb, var(--verdict-true) 18%, transparent); color: var(--verdict-true); } .verdict-false { background: color-mix(in srgb, var(--verdict-false) 18%, transparent); color: var(--verdict-false); } .verdict-misleading { background: color-mix(in srgb, var(--verdict-misleading) 18%, transparent); color: var(--verdict-misleading); } .verdict-unverified { background: color-mix(in srgb, var(--verdict-unverified) 18%, transparent); color: var(--verdict-unverified); } .verdict-outdated { background: color-mix(in srgb, var(--verdict-outdated) 18%, transparent); color: var(--verdict-outdated); } .verdict-disputed { background: color-mix(in srgb, var(--verdict-disputed) 18%, transparent); color: var(--verdict-disputed); } .confidence-num { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); flex-shrink: 0; } .claim-icons { display:flex; gap:2px; font-size:0.85rem; flex-shrink:0; } .category-tag { font-size:0.72rem; color:var(--text-muted); text-transform:capitalize; } /* ── Loading / empty states ────────────────────────────── */ .state-msg { text-align: center; padding: var(--space-8); color: var(--text-muted); } .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Claim detail ──────────────────────────────────────── */ .detail-header { margin-bottom: var(--space-8); } .detail-verdict-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); } .confidence-label { color: var(--text-muted); font-size: 0.875rem; } .section-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); margin-bottom: var(--space-4); } .section-card h2 { font-size: 1rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } /* ── Redesigned claim detail page (kiri-ux migration 2026-06-04) ── */ .claim-hero { background: var(--bg-card); border: 1px solid var(--border); border-left: 5px solid var(--hero-accent, var(--accent)); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-6); margin-bottom: var(--space-4); } .claim-hero__meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .claim-hero__id { font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--text-muted); } .claim-hero__title { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin-bottom: var(--space-4); } .claim-hero__statement { border-left: 3px solid var(--border); padding: var(--space-2) 0 var(--space-2) var(--space-4); margin-bottom: var(--space-6); font-size: 1.05rem; font-style: italic; color: var(--text-primary); line-height: 1.6; } .claim-hero__verdict { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .claim-hero__verdict-detail { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; } .claim-hero__gloss { font-size: 0.9rem; color: var(--text-primary); } .claim-hero__conf-label { font-size: 0.78rem; color: var(--text-muted); } .verdict-badge--lg { font-size: 1rem; padding: 6px 16px; border-radius: var(--radius); } .count-pill { font-size: 0.7rem; font-weight: 700; background: var(--bg-elevated); color: var(--text-muted); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; } .claim-reasoning { line-height: 1.75; font-size: 0.95rem; } .muted { color: var(--text-muted); } .source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); } .source-card { display: block; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); text-decoration: none; transition: border-color 0.15s; } .source-card:hover { border-color: var(--accent); text-decoration: none; } .source-card__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 4px; } .source-card__domain { font-size: 0.75rem; color: var(--text-muted); flex: 1; } .source-card__stance { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .stance-support { color: var(--verdict-true); } .stance-contra { color: var(--verdict-false); } .source-card__title { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); line-height: 1.4; } .source-card__excerpt { font-size: 0.8rem; color: var(--text-muted); font-style: italic; margin-top: 4px; line-height: 1.5; } .section-card--flagged { border-color: var(--verdict-misleading); } .flag-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .flag-chip { background: color-mix(in srgb, var(--verdict-misleading) 15%, transparent); border: 1px solid color-mix(in srgb, var(--verdict-misleading) 35%, transparent); color: var(--verdict-misleading); border-radius: 999px; padding: 2px 12px; font-size: 0.78rem; } .verdict-timeline { display: flex; flex-direction: column; gap: var(--space-2); } .timeline-entry { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-sm); flex-wrap: wrap; } .timeline-conf { font-size: 0.8rem; color: var(--text-muted); } .timeline-date { font-size: 0.78rem; color: var(--text-muted); } .timeline-run { font-size: 0.75rem; margin-left: auto; } .claim-footer-link { text-align: center; margin-top: var(--space-6); } .btn-link { display: inline-block; padding: var(--space-3) var(--space-6); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--accent); font-size: 0.9rem; transition: border-color 0.15s; } .btn-link:hover { border-color: var(--accent); text-decoration: none; } .sources-list { display: flex; flex-direction: column; gap: var(--space-3); } .source-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-sm); } .source-item .relevance-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; } .relevance-high { background: var(--verdict-true); } .relevance-medium { background: var(--verdict-outdated); } .relevance-low { background: var(--text-muted); } .source-title { font-size: 0.875rem; font-weight: 500; } .source-domain { font-size: 0.75rem; color: var(--text-muted); } .source-excerpt { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; font-style: italic; } .flags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); } .flag-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; } .flag-on { color: var(--verdict-misleading); } .flag-off { color: var(--text-muted); } .verdict-timeline { display: flex; flex-direction: column; gap: var(--space-3); } .timeline-entry { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); } .timeline-entry:last-child { border-bottom: none; } .timeline-date { font-size: 0.8rem; color: var(--text-muted); min-width: 160px; } .timeline-conf { font-size: 0.8rem; color: var(--text-muted); } /* ── Observatory (claim-centric) ───────────────────────────── */ .obs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); } .stat-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); } .stat-box__label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .stat-box__value { font-size: 1.4rem; font-weight: 700; margin-top: 2px; } /* claim picker list */ .obs-claim-list { display: flex; flex-direction: column; gap: var(--space-2); } .obs-claim-row { text-decoration: none; } .obs-claim-row:hover { text-decoration: none; } .obs-row-cta { margin-left: auto; color: var(--accent); font-weight: 500; } /* pipeline */ .ps-pipeline { display: flex; flex-direction: column; } .ps-step { display: flex; gap: var(--space-4); } .ps-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 32px; } .ps-num { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; z-index: 1; } .ps-line { width: 2px; background: var(--border); flex: 1; margin: 4px 0; min-height: 16px; } .ps-step:last-child .ps-line { display: none; } .ps-content { flex: 1; padding-bottom: var(--space-6); min-width: 0; } .ps-label { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding-top: 3px; } .ps-label-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .ps-label-meta { font-size: 0.72rem; color: var(--text-muted); } .ps-body { font-size: 0.875rem; } .ps-claim { font-size: 1rem; font-weight: 700; } .ps-claim-text { font-size: 0.88rem; color: var(--text-muted); font-style: italic; line-height: 1.55; margin-top: 4px; } .ps-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .ps-chip { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); border-radius: 999px; padding: 2px 12px; font-size: 0.78rem; } .ps-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); } .ps-result { display: block; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); text-decoration: none; transition: border-color 0.15s; } .ps-result:hover { border-color: var(--accent); text-decoration: none; } .ps-result-title { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); line-height: 1.4; } .ps-result-domain { font-size: 0.72rem; color: var(--text-muted); margin: 2px 0; } .ps-result-snippet { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; } .ps-reqhead { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); } .ps-model { font-family: var(--font-mono, monospace); font-size: 0.75rem; background: var(--color-primary-subtle, var(--bg-elevated)); color: var(--accent); padding: 3px 8px; border-radius: var(--radius-sm); } .ps-tokens { display: flex; gap: var(--space-2); flex-wrap: wrap; } .ps-tok { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 0.74rem; color: var(--text-muted); } .ps-tok b { color: var(--text-primary); font-weight: 600; } .ps-tok-total { border-color: var(--accent); color: var(--accent); } .ps-code { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: 0.76rem; font-family: var(--font-mono, monospace); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow-y: auto; color: var(--text-primary); line-height: 1.6; } .ps-code-out { border-left: 3px solid var(--color-viz-positive); } .ps-verdict { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .ps-arrow { color: var(--text-muted); } .ps-reasoning { color: var(--text-primary); font-size: 0.9rem; line-height: 1.7; background: var(--bg-elevated); border-radius: var(--radius-sm); padding: var(--space-3); margin-top: var(--space-3); } /* ── Page header for detail/observatory ───────────────── */ .page-header { margin-bottom: var(--space-6); } .page-header h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: var(--space-2); } .page-header .sub { color: var(--text-muted); font-size: 0.9rem; } .back-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: 0.875rem; color: var(--text-muted); } .back-link:hover { color: var(--accent); text-decoration: none; } /* ── Responsive ────────────────────────────────────────── */ @media (max-width: 768px) { .container { padding: 0 var(--space-4); } .claims-grid { grid-template-columns: 1fr; } .obs-status-bar { flex-direction: column; align-items: flex-start; } header .container { flex-direction: column; gap: var(--space-2); } } @media (max-width: 375px) { .container { padding: 0 var(--space-3); } .section-card { padding: var(--space-4); } }