/* ============================================================ Lexicon — World coverage globe (view: #/world). Extends the manuscript design system in app.css: same tokens, same atoms (.card/.btn/.badge/.input/.chip-btn). Only the globe stage itself is fixed dark ("space") in both themes — the HUD and every panel follow the theme like the rest of the app. ============================================================ */ /* full-bleed stage inside the 1120px .app column. The stage is space in both themes, so the HUD overrides the design-system tokens with the night variant here — a parchment panel floating over a black sky reads as a bug, not a theme. */ .world { margin: -8px calc(50% - 50vw) 0; width: 100vw; position: relative; --bg: #070a12; --bg-glow: #0d1524; --surface: #121a29; --surface-2: #1a2434; --input: #101725; --border: #2a3547; --border-strong: #3c4a62; --text: #e9eef8; --text-dim: #9aa9be; --text-faint: #6c7b93; --accent: #dba847; --accent-ink: #241a05; --good: #5fd39b; --warn: #ffd166; --danger: #ff8b7c; --info: #6fd8ff; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 38px rgba(0,0,0,.45); color-scheme: dark; /* re-resolve the inherited text colour here: `color` inherits a COMPUTED value, so without this every element that just inherits from would keep the light theme's ink on a dark panel */ color: var(--text); } .world-stage { position: relative; height: calc(100vh - 58px); min-height: 460px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #101a2c 0%, #070a12 55%, #04050a 100%); cursor: grab; } .world-stage:active { cursor: grabbing; } /* Globe.gl owns this element's children — the HUD lives in siblings above it */ .world-canvas { position: absolute; inset: 0; z-index: 1; } .world-stage canvas { display: block; } /* faint star field, cheap: two repeating radial gradients, no DOM, no texture download */ .world-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 74% 12%, #cfe0ff, transparent), radial-gradient(1px 1px at 33% 71%, #fff, transparent), radial-gradient(1px 1px at 88% 62%, #ffe9c0, transparent), radial-gradient(1px 1px at 55% 33%, #fff, transparent), radial-gradient(1px 1px at 21% 88%, #dfe8ff, transparent), radial-gradient(1px 1px at 65% 84%, #fff, transparent), radial-gradient(1px 1px at 92% 28%, #fff, transparent); } /* ---------- HUD chrome ---------- */ .world-hud { position: absolute; z-index: 6; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); } /* leaves room for the legend pinned at the bottom-left */ .world-hud.left { top: 14px; left: 14px; width: 268px; padding: 12px; max-height: calc(100% - 210px); overflow: auto; } .world-hud.legend { bottom: 14px; left: 14px; padding: 10px 12px; width: 268px; } .world-panel { position: absolute; z-index: 7; top: 14px; right: 14px; bottom: 14px; width: 372px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); overflow: auto; padding: 16px; } .world-panel.hidden, .world-hud.hidden { display: none; } .world-modes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .world-modes .chip-btn { padding: 5px 10px; font-size: 12px; } .world-search { width: 100%; margin-bottom: 8px; } .world-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .world-filters select.input { padding: 7px 8px; font-size: 12.5px; width: 100%; min-width: 0; } .world-filters label { grid-column: span 1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); display: block; margin-bottom: 2px; } .world-filters .wide { grid-column: span 2; } .world-actions { display: flex; gap: 6px; margin-top: 10px; } .world-actions .btn { padding: 7px 10px; font-size: 12.5px; flex: 1; } .world-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 8px; line-height: 1.45; } .world-keys { font-size: 10.5px; color: var(--text-faint); margin-top: 6px; line-height: 1.6; } .world-keys b { color: var(--text-dim); font-family: var(--mono); font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; } /* ---------- layer toggles (live entity counts) ---------- */ .world-layers { display: grid; gap: 2px; } .layer-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; user-select: none; } .layer-row:hover { background: var(--surface-2); } .layer-row .l-box { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--border-strong); flex: none; } .layer-row.on { color: var(--text); } .layer-row.on .l-box { background: var(--accent); border-color: var(--accent); } .layer-row .l-count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); } /* search results dropdown */ .world-results { margin-top: 6px; max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .world-results:empty { display: none; } .world-result { padding: 6px 9px; font-size: 12.5px; cursor: pointer; display: flex; align-items: center; gap: 7px; } .world-result:hover { background: var(--surface-2); } .world-result .sub { color: var(--text-faint); font-size: 11px; margin-left: auto; } /* ---------- legend ---------- */ .legend-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-dim); padding: 2px 0; } .legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; } /* mirrors COV_STOPS in views/world.js */ .legend-scale { height: 9px; border-radius: 999px; margin: 6px 0 3px; background: linear-gradient(90deg, #2c2838 0%, #523a28 8%, #7a541a 16%, #a67620 26%, #cc9832 36%, #dfb052 50%, #afd6a8 70%, #7cd0b2 85%, #4fbf9a 100%); } .legend-scale-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-faint); } /* ---------- tooltip (globe.gl injects .world-tip into its own layer) ---------- */ .world-tip { font-family: var(--sans); font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--surface) 95%, transparent); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; box-shadow: var(--shadow); max-width: 260px; } .world-tip b { font-size: 13px; } .world-tip .t-sub { color: var(--text-faint); font-size: 11px; } .world-tip .t-cov { color: var(--accent); font-weight: 700; } /* ---------- detail panel ---------- */ .wp-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; } .wp-title { font-family: var(--serif); font-size: 21px; line-height: 1.15; letter-spacing: -.02em; } .wp-close { margin-left: auto; } .wp-sub { color: var(--text-dim); font-size: 12.5px; margin-bottom: 12px; } .wp-cov { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 4px; } .wp-cov .big { font-size: 34px; font-weight: 720; letter-spacing: -.03em; font-family: var(--serif); } .wp-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 14px; } .wp-bar > i { display: block; height: 100%; border-radius: 999px; } .wp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .wp-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; } .wp-cell .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); } .wp-cell .v { font-size: 16px; font-weight: 680; letter-spacing: -.01em; } .wp-comp { display: grid; grid-template-columns: 96px 1fr 42px; gap: 7px; align-items: center; font-size: 12px; padding: 3px 0; } .wp-comp .cname { color: var(--text-dim); } .wp-comp .cbar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .wp-comp .cbar > i { display: block; height: 100%; } .wp-comp .cval { text-align: right; font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .wp-comp.na .cval { color: var(--text-faint); } .wp-list { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; } .wp-list code { font-family: var(--mono); font-size: 11.5px; } .wp-langs { display: flex; flex-wrap: wrap; gap: 5px; } .wp-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; } .wp-lang:hover { border-color: var(--accent); color: var(--accent); } /* ---------- family graph overlay ---------- */ .world-graph { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: color-mix(in srgb, #04050a 78%, transparent); backdrop-filter: blur(3px); } .world-graph.hidden { display: none; } .world-graph svg { width: 100%; height: 100%; } .world-graph .g-node { cursor: pointer; } .world-graph .g-node text { font-size: 11px; fill: var(--text); paint-order: stroke; stroke: rgba(4,5,10,.85); stroke-width: 3px; pointer-events: none; } .world-graph .g-root text { font-family: var(--serif); font-size: 16px; } .world-graph .g-link { fill: none; stroke: var(--border-strong); stroke-opacity: .55; } .world-graph .g-head { position: absolute; top: 16px; left: 18px; right: 18px; z-index: 2; } .world-graph .g-head select.input { max-width: 260px; } /* ---------- full language report ---------- */ .world-report { position: absolute; inset: 0; z-index: 9; overflow: auto; padding: 24px; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(4px); } .world-report.hidden { display: none; } .world-report .inner { max-width: 900px; margin: 0 auto; } .wr-table { width: 100%; border-collapse: collapse; font-size: 13px; } .wr-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 650; padding: 6px 8px; border-bottom: 1px solid var(--border); } .wr-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); } .wr-table tr:hover td { background: var(--surface-2); } .wr-table .num { text-align: right; font-family: var(--mono); font-size: 12px; } /* status pills reused everywhere (colors are the legend contract with the backend) */ .st { font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 999px; white-space: nowrap; } .st-validated { background: rgba(95,211,155,.16); color: #5fd39b; } .st-canary { background: rgba(111,216,255,.16); color: #6fd8ff; } .st-db-wired, .st-candidate { background: rgba(255,209,102,.16); color: #ffd166; } .st-blocked { background: rgba(255,139,124,.18); color: #ff8b7c; } .st-panlex-only { background: rgba(154,148,133,.18); color: #b9b1a0; } /* ---------- loading / errors ---------- */ .world-loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 10; color: var(--text-dim); font-size: 13px; gap: 10px; text-align: center; } .world-loading .spinner { margin: 0 auto 10px; } /* ---------- mobile: HUD collapses, panel becomes a bottom sheet ---------- */ @media (max-width: 860px) { .world-stage { height: calc(100vh - 58px); } .world-hud.left { width: calc(100% - 28px); max-height: 44%; } .world-hud.left.collapsed { max-height: none; } .world-hud.legend { display: none; } .world-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 52%; border-radius: var(--radius) var(--radius) 0 0; } .world-filters { grid-template-columns: 1fr 1fr; } .world-hud.left.collapsed .world-body { display: none; } } .world-toggle { display: none; } @media (max-width: 860px) { .world-toggle { display: inline-flex; } }