/* ========================================================================== query-widget.css — the SINGLE, BLOG-OWNED stylesheet for the query-result widget. ONE component, THEMEABLE by surface. Every colour is a CSS variable whose FALLBACK is the DARK terminal default: with no theme applied the widget renders dark (the default the AI Terminal's shared renderer relies on). The blog opts into a LIGHT skin by putting `theme-light` on — the `.theme-light { --q-*: … }` block below then supplies the light palette that inherits to every widget element (panel, table, inline value, and — via result-renderer.js reading the --q-chart-* vars — the chart). Restyle in one place → all posts change; the dark default is never touched, so apps/ai is unaffected. Covers: the query PANEL frame (.blog-query*), the inline value chip (.blog-val*), the no-JS fallback table (.blog-fallback-table), and the live renderer's output chrome (.strasmore-artifact / .sr-* / .data-grid*, drawn by apps/shared/result-renderer.js). ========================================================================== */ /* ---- LIGHT skin (blog): applied via `theme-light` on ; inherits to all widgets ---- */ .theme-light { --q-bg: #FFFFFF; --q-panel: #F8FAFC; --q-surface: #F1F5F9; --q-border: #E7E5E4; --q-line: #EEEDEB; --q-accent: #2563EB; --q-muted: #78716C; --q-text: #1C1917; --q-cell: #292524; --q-cell-1: #57534E; --q-row-even: #FFFFFF; --q-row-odd: #FAFAF9; --q-hover-bg: #EFF6FF; --q-hover-text: #0C0A09; --q-code-bg: #F8FAFC; --q-code-text: #292524; --q-red: #DC2626; --q-error-bg: #FEF2F2; /* chart (read by result-renderer.js via getComputedStyle) */ --q-chart-axis: #57534E; --q-chart-grid: #E7E5E4; --q-chart-legend: #44403C; --q-chart-tt-bg: #FFFFFF; --q-chart-tt-border: #E7E5E4; --q-chart-tt-text: #1C1917; } /* Font (not themed). */ .blog-query, .strasmore-artifact, .blog-val, .blog-val-missing, .blog-fallback-table, .blog-query-empty { --q-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- The query PANEL: a labelled data unit, consistent on every post ---- */ .blog-query { margin: 1.75rem 0; border: 1px solid var(--q-border, #27272A); border-left: 3px solid var(--q-accent, #3B82F6); background: var(--q-bg, #000000); } /* In LIGHT, drop the terminal accent-stripe for a uniform card-grey border (card sibling). */ .theme-light .blog-query { border-left: 1px solid var(--q-border, #E7E5E4); } .blog-query-cap { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--q-panel, #09090B); border-bottom: 1px solid var(--q-border, #27272A); } .blog-query-kicker { font-family: var(--q-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: var(--q-accent, #3B82F6); padding: 2px 6px; } .blog-query-title { font-family: var(--q-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--q-muted, #71717A); } .blog-query-notice { padding: 0.75rem 1rem; font-family: var(--q-mono); font-size: 12px; color: var(--q-cell-1, #A1A1AA); background: var(--q-panel, #09090B); } /* The always-visible SQL — the repeated trust element ("the query behind the number"). */ .blog-query-sql { border-top: 1px solid var(--q-border, #27272A); background: var(--q-code-bg, #050505); font-family: var(--q-mono); font-size: 12px; color: var(--q-cell-1, #A1A1AA); } .blog-query-sql summary { cursor: pointer; padding: 0.5rem 0.75rem; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--q-muted, #71717A); user-select: none; list-style: none; } .blog-query-sql summary::before { content: "▸ "; color: var(--q-accent, #3B82F6); } .blog-query-sql[open] summary::before { content: "▾ "; } .blog-query-sql summary:hover { color: var(--q-text, #F4F4F5); } .blog-query-sql pre { margin: 0; padding: 0 0.75rem 0.75rem; white-space: pre-wrap; color: var(--q-code-text, #D4D4D8); line-height: 1.55; } /* ---- Inline value chip: signals "this number came from the query above" ---- */ .blog-val { font-family: var(--q-mono); font-variant-numeric: tabular-nums; color: var(--q-text, #F4F4F5); border-bottom: 1px dotted var(--q-accent, #3B82F6); cursor: help; } .blog-val-missing { font-family: var(--q-mono); color: var(--q-red, #EF4444); } /* ---- No-JS fallback table (generated from stored data) ---- */ .blog-fallback-table { width: 100%; border-collapse: collapse; font-family: var(--q-mono); font-size: 11px; } .blog-fallback-table th, .blog-fallback-table td { border: 1px solid var(--q-line, #1a1a1a); padding: 4px 8px; text-align: right; color: var(--q-cell, #D4D4D8); } .blog-fallback-table th { background: var(--q-panel, #09090B); color: var(--q-cell-1, #A1A1AA); text-transform: uppercase; } .blog-fallback-table caption { color: var(--q-muted, #71717A); font-size: 10px; margin-bottom: 4px; } .blog-query-empty { color: var(--q-muted, #71717A); font-family: var(--q-mono); font-size: 12px; padding: 0.5rem 0.75rem; } /* ========================================================================== Live renderer output (apps/shared/result-renderer.js). Table + chart chrome. ========================================================================== */ .strasmore-artifact { background: var(--q-bg, #000000); display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; font-family: var(--q-mono); } .strasmore-artifact .sr-toolbar { background: var(--q-panel, #09090B); border-bottom: 1px solid var(--q-border, #27272A); display: flex; justify-content: space-between; align-items: stretch; min-width: 0; width: 100%; overflow: hidden; } .strasmore-artifact .sr-tag { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-right: 1px solid var(--q-border, #27272A); background: var(--q-surface, #111114); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--q-accent, #3B82F6); white-space: nowrap; } .strasmore-artifact .sr-tag::before { content: ""; width: 6px; height: 6px; background: var(--q-accent, #3B82F6); display: inline-block; } .strasmore-artifact .sr-btns { display: flex; align-items: stretch; flex-shrink: 0; } .strasmore-artifact .sr-btn { font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.375rem 0.75rem; border: none; border-left: 1px solid var(--q-border, #27272A); background: transparent; color: var(--q-muted, #71717A); cursor: pointer; transition: color 0.15s, background 0.15s; } .strasmore-artifact .sr-btn:hover { color: var(--q-text, #F4F4F5); } .strasmore-artifact .sr-btn.active { background: var(--q-accent, #3B82F6); color: #fff; } .strasmore-artifact .sr-chart { position: relative; width: 100%; height: 300px; padding: 1rem; border-bottom: 1px solid var(--q-border, #27272A); background: var(--q-bg, #000); } .strasmore-artifact .sr-chart canvas { width: 100% !important; height: 100% !important; } .strasmore-artifact .sr-chart-fault { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--q-red, #EF4444); font-size: 10px; } .strasmore-artifact .sr-json { padding: 1rem; background: var(--q-bg, #000); border-bottom: 1px solid var(--q-border, #27272A); max-height: 300px; overflow-y: auto; } .strasmore-artifact .sr-json pre { font-size: 10px; color: var(--q-cell-1, #A1A1AA); margin: 0; } .strasmore-artifact .sr-error { padding: 1rem; font-size: 10px; color: var(--q-red, #EF4444); background: var(--q-error-bg, #110000); border-bottom: 1px solid var(--q-border, #27272A); } /* Data grid */ .strasmore-artifact .data-grid-container { display: block; overflow: auto; max-height: 450px; background: var(--q-bg, #000000); border-top: 1px solid var(--q-border, #27272A); } .strasmore-artifact .data-grid { width: max-content; min-width: 100%; border-collapse: collapse; font-family: var(--q-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; } .strasmore-artifact .data-grid th { position: sticky; top: 0; z-index: 10; background-color: var(--q-panel, #09090B); padding: 8px 12px; text-align: right; color: var(--q-cell-1, #A1A1AA); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--q-border, #27272A); border-right: 1px solid var(--q-line, #111114); white-space: nowrap; } .strasmore-artifact .data-grid th:first-child { text-align: left; } .strasmore-artifact .data-grid td { padding: 6px 12px; text-align: right; color: var(--q-cell, #D4D4D8); white-space: nowrap; border-bottom: 1px solid var(--q-line, #111114); border-right: 1px solid var(--q-line, #111114); } .strasmore-artifact .data-grid td:first-child { text-align: left; color: var(--q-cell-1, #A1A1AA); } .strasmore-artifact .data-grid tr:nth-child(even) td { background-color: var(--q-row-even, #000000); } .strasmore-artifact .data-grid tr:nth-child(odd) td { background-color: var(--q-row-odd, #050505); } .strasmore-artifact .data-grid tr:hover td { background-color: var(--q-hover-bg, #111114); color: var(--q-hover-text, #FFF); cursor: crosshair; } .strasmore-artifact .data-grid .sr-truncated td { text-align: center; color: var(--q-muted, #71717A); font-size: 10px; padding: 12px; border-top: 1px solid var(--q-border, #27272A); background: var(--q-panel, #09090B); }