/* Tokens: reference data-viz palette (validated light + dark). The theme is always stamped on by app.js, resolved from the OS setting unless the viewer has toggled it. */ :root { color-scheme: light; --page: #f9f9f7; --surface-1: #fcfcfb; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11, 11, 11, 0.1); --wash: rgba(11, 11, 11, 0.05); --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --seq-bar: #86b6ef; --seq-point: #2a78d6; --up: #006300; --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --radius: 10px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --page: #0d0d0d; --surface-1: #1a1a19; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.1); --wash: rgba(255, 255, 255, 0.06); --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --seq-bar: #256abf; --seq-point: #3987e5; --up: #0ca30c; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--text-primary); font-size: 14px; line-height: 1.4; } h1, h2, h3, p { margin: 0; } button, input { font: inherit; color: inherit; } .muted { color: var(--text-muted); } button { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; } button:hover { background: var(--wash); } button:focus-visible, .hit:focus-visible, summary:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; } button.ghost { background: transparent; } /* --- header & filters ------------------------------------------------------ */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; background: var(--surface-1); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; } .logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--text-primary); color: var(--surface-1); font-weight: 800; letter-spacing: -0.5px; } h1 { font-size: 18px; } .tagline { color: var(--text-secondary); font-size: 13px; } .topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .source, .status { font-size: 12px; color: var(--text-secondary); } .source.mock { padding: 2px 8px; border: 1px dashed var(--axis); border-radius: 999px; } .status.error { color: var(--critical); } .status.error::before { content: "✕ "; } .settings { position: relative; } .settings summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); } .settings form { position: absolute; right: 0; top: 28px; z-index: 1000; display: grid; gap: 8px; width: 320px; padding: 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .settings input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--page); } .filters { display: flex; gap: 12px; align-items: center; padding: 16px 24px 0; } .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .segmented button { border: 0; border-radius: 0; background: var(--surface-1); padding: 6px 14px; } .segmented button + button { border-left: 1px solid var(--border); } .segmented button[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-1); font-weight: 600; } /* --- layout ----------------------------------------------------------------- */ main { padding: 16px 24px 32px; display: grid; gap: 16px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat, .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); } .stat { padding: 14px 16px; min-width: 0; } .stat-label { font-size: 12px; color: var(--text-secondary); } .stat-value { font-size: 28px; font-weight: 650; margin: 2px 0; } .stat-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .layout { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; grid-template-rows: 440px auto; gap: 16px; } .trending-card { grid-row: span 2; display: flex; flex-direction: column; min-height: 0; } .card { padding: 16px; min-width: 0; } .card-head { margin-bottom: 12px; } .card-head h2 { font-size: 15px; } .sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } @media (max-width: 960px) { .stats { grid-template-columns: repeat(2, 1fr); } .layout { grid-template-columns: 1fr; grid-template-rows: auto; } .trending-card { grid-row: auto; } .map-card { height: 420px; } } body.loading .trending, body.loading .map, body.loading .plot, body.loading .stats { opacity: 0.85; transition: opacity 0.2s; } /* --- trending list ------------------------------------------------------------- */ .trending { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .topic { width: 100%; text-align: left; display: grid; gap: 6px; padding: 8px 10px; border: 1px solid transparent; background: transparent; } .topic:hover { background: var(--wash); } .topic[aria-pressed="true"] { border-color: var(--text-primary); background: var(--wash); } .topic-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .rank { width: 18px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; flex: none; } .topic-label { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .line-key { width: 12px; height: 2px; border-radius: 1px; flex: none; } .line-key.none { background: transparent; } .bar { height: 6px; margin-left: 26px; } .bar-fill { height: 100%; background: var(--seq-bar); border-radius: 0 4px 4px 0; min-width: 2px; transition: width 0.4s; } .topic-meta { display: flex; gap: 10px; margin-left: 26px; font-size: 12px; color: var(--text-secondary); } .topic-meta .count { font-variant-numeric: tabular-nums; } .tags { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trend.up { color: var(--up); } .bs { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11px; font-weight: 600; color: var(--text-primary); padding: 1px 6px 1px 2px; border-radius: 999px; border: 1px solid var(--border); } .bs-icon { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; color: #0b0b0b; font-size: 10px; font-weight: 800; } .bs.good .bs-icon { background: var(--good); color: #fff; } .bs.warning .bs-icon { background: var(--warning); } .bs.serious .bs-icon { background: var(--serious); } .bs.critical .bs-icon { background: var(--critical); color: #fff; } /* --- detail ---------------------------------------------------------------------- */ .detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); overflow: auto; } .detail-head { display: flex; align-items: center; gap: 8px; } .detail-head h2 { font-size: 15px; flex: 1; } .detail-facts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 12px; font-size: 12px; color: var(--text-secondary); } .detail h3 { font-size: 12px; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; } .samples { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .samples li { padding: 8px 10px; border-radius: 8px; background: var(--wash); } .sample-meta { display: flex; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; } /* --- map ---------------------------------------------------------------------------- */ .map-card { display: flex; flex-direction: column; } .map { flex: 1; min-height: 280px; border-radius: 8px; overflow: hidden; background: var(--page); } .leaflet-container { font: inherit; } .pt { stroke: var(--surface-1); stroke-width: 2px; transition: fill-opacity 0.3s; } .pt.base { fill: var(--seq-point); fill-opacity: 0.55; } .pt.muted { fill: var(--text-muted); fill-opacity: 0.18; stroke-opacity: 0.4; } .pt.sel { fill: var(--text-primary); fill-opacity: 0.8; } .pt.s1 { fill: var(--series-1); fill-opacity: 0.85; } .pt.s2 { fill: var(--series-2); fill-opacity: 0.85; } .pt.s3 { fill: var(--series-3); fill-opacity: 0.85; } .pt.s4 { fill: var(--series-4); fill-opacity: 0.85; } .leaflet-tooltip { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .leaflet-tooltip-top::before { border-top-color: var(--surface-1); } /* --- chart ---------------------------------------------------------------------------- */ .legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-secondary); } .legend li { display: inline-flex; align-items: center; gap: 6px; } .legend li.selected { color: var(--text-primary); font-weight: 600; } .plot { position: relative; height: 280px; } .plot svg { display: block; overflow: visible; } .grid { stroke: var(--grid); stroke-width: 1; } .baseline { stroke: var(--axis); stroke-width: 1; } .tick { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; } .series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .series-line.selected { stroke-width: 3; } .end-dot, .hover-dot { stroke: var(--surface-1); stroke-width: 2; } .label-key { stroke-width: 2; stroke-linecap: round; } .direct-label { fill: var(--text-secondary); font-size: 12px; } .direct-label.selected { fill: var(--text-primary); font-weight: 600; } .crosshair { stroke: var(--axis); stroke-width: 1; } .hit { fill: transparent; cursor: crosshair; } .empty { color: var(--text-muted); padding: 24px 0; } .tooltip { position: absolute; pointer-events: none; z-index: 5; min-width: 180px; padding: 8px 10px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); font-size: 12px; } .tip-head { color: var(--text-muted); margin-bottom: 4px; } .tip-row { display: flex; align-items: center; gap: 8px; } .tip-row strong { font-variant-numeric: tabular-nums; min-width: 44px; } .tip-label { color: var(--text-secondary); white-space: nowrap; } .table-view { margin-top: 8px; font-size: 12px; } .table-view summary { cursor: pointer; color: var(--text-secondary); } .table-scroll { max-height: 240px; overflow: auto; margin-top: 8px; } .table-view table { border-collapse: collapse; width: 100%; } .table-view th, .table-view td { padding: 4px 8px; border-bottom: 1px solid var(--grid); text-align: left; white-space: nowrap; } .table-view td.num { text-align: right; font-variant-numeric: tabular-nums; } .leaflet-control-attribution { background: color-mix(in srgb, var(--surface-1) 80%, transparent) !important; color: var(--text-muted); } .leaflet-control-attribution a { color: var(--text-secondary); } .leaflet-bar a { background: var(--surface-1); color: var(--text-primary); border-color: var(--border); }