/* Hub Upload Debug — "Signal Console" (ADR 0006). * * Unfold ships a precompiled Tailwind build, so ad-hoc `dark:*` utilities on our * templates silently no-op (white-on-white in dark mode). Per the platform * convention (see devices.css), style explicitly here using the _tokens.css * semantic variables — they flip automatically when `.dark` is toggled on , * so light + dark both stay legible. Loaded globally via UNFOLD["STYLES"]. */ #hub-upload-debug { --hud-signal: #059669; /* emerald — live / active */ --hud-signal-soft: rgba(5, 150, 105, 0.10); } .dark #hub-upload-debug { --hud-signal: #34d399; --hud-signal-soft: rgba(52, 211, 153, 0.14); } #hub-upload-debug .hud-mono { font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; } /* ── Surfaces ─────────────────────────────────────────────────────────── */ #hub-upload-debug .hud-card { background: var(--surface-card); border: 1px solid var(--border-base); border-radius: 0.5rem; } #hub-upload-debug .hud-sunken { background: var(--surface-sunken); border: 1px solid var(--border-faint); border-radius: 0.5rem; } /* ── Labels / text emphasis (token-driven) ───────────────────────────── */ #hub-upload-debug .hud-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); } #hub-upload-debug .hud-section { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } #hub-upload-debug .hud-faint { color: var(--text-faint); } #hub-upload-debug .hud-muted { color: var(--text-muted); } #hub-upload-debug .hud-body { color: var(--text-body); } #hub-upload-debug .hud-strong { color: var(--text-strong); } /* ── Inputs ───────────────────────────────────────────────────────────── */ #hub-upload-debug .hud-input { width: 100%; background: var(--surface-input); color: var(--text-body); border: 1px solid var(--border-base); border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color-scheme: light dark; /* legible native date-picker glyphs in both themes */ } #hub-upload-debug .hud-input:focus { outline: none; border-color: var(--hud-signal); box-shadow: 0 0 0 3px var(--hud-signal-soft); } #hub-upload-debug .hud-input::placeholder { color: var(--text-faint); } #hub-upload-debug .hud-input-icon { position: relative; } #hub-upload-debug .hud-input-icon .hud-input { padding-left: 2rem; } #hub-upload-debug .hud-input-icon > .material-symbols-outlined { position: absolute; left: 0.5rem; top: 0.45rem; color: var(--text-faint); font-size: 1.1rem; } /* ── List (the upload "stream") ──────────────────────────────────────── */ #hub-upload-debug .hud-list { background: var(--surface-card); border: 1px solid var(--border-base); border-radius: 0.5rem; overflow: hidden; max-height: 70vh; overflow-y: auto; } #hub-upload-debug .hud-list-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: var(--surface-card); border-bottom: 1px solid var(--border-faint); font-size: 0.75rem; color: var(--text-muted); } #hub-upload-debug .hud-table { width: 100%; font-size: 0.8125rem; } #hub-upload-debug .hud-table th { text-align: left; font-weight: 500; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border-faint); } #hub-upload-debug .hud-table td { padding: 0.375rem 0.75rem; color: var(--text-body); } #hub-upload-debug .hud-table .num { text-align: right; color: var(--text-muted); } #hub-upload-debug .hud-row { cursor: pointer; border-bottom: 1px solid var(--border-faint); border-left: 2px solid transparent; transition: background 0.08s ease; } #hub-upload-debug .hud-row:hover { background: var(--hud-signal-soft); } #hub-upload-debug .hud-row:focus-visible { outline: none; background: var(--hud-signal-soft); border-left-color: var(--hud-signal); } #hub-upload-debug .hud-row.active { background: var(--hud-signal-soft); border-left-color: var(--hud-signal); } /* ── Detail (the decompressed-frame "scope") ─────────────────────────── */ #hub-upload-debug .hud-detail { background: var(--surface-card); border: 1px solid var(--border-base); border-radius: 0.5rem; min-height: 40vh; } /* ── Gateway header stat cells ───────────────────────────────────────── */ #hub-upload-debug .hud-stat-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); } #hub-upload-debug .hud-stat-value { color: var(--text-body); word-break: break-all; } /* ── dDt family chips (the differentiation anchor) ───────────────────── */ #hub-upload-debug .hud-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.45rem; border-radius: 0.35rem; font-size: 0.68rem; font-weight: 600; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); } #hub-upload-debug .hud-chip::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 9999px; background: var(--c); } #hub-upload-debug .hud-chip .hud-chip-code { opacity: 0.6; } #hub-upload-debug .hud-chip[data-family="telemetry"] { --c: #2563eb; } #hub-upload-debug .hud-chip[data-family="scale"] { --c: #d97706; } #hub-upload-debug .hud-chip[data-family="audio"] { --c: #7c3aed; } #hub-upload-debug .hud-chip[data-family="audio-meta"] { --c: #c026d3; } #hub-upload-debug .hud-chip[data-family="diagnostic"] { --c: #059669; } #hub-upload-debug .hud-chip[data-family="unknown"] { --c: #64748b; } .dark #hub-upload-debug .hud-chip[data-family="telemetry"] { --c: #60a5fa; } .dark #hub-upload-debug .hud-chip[data-family="scale"] { --c: #fbbf24; } .dark #hub-upload-debug .hud-chip[data-family="audio"] { --c: #a78bfa; } .dark #hub-upload-debug .hud-chip[data-family="audio-meta"] { --c: #e879f9; } .dark #hub-upload-debug .hud-chip[data-family="diagnostic"] { --c: #34d399; } .dark #hub-upload-debug .hud-chip[data-family="unknown"] { --c: #94a3b8; } /* ── Raw JSON toggle button ──────────────────────────────────────────── */ #hub-upload-debug .hud-toggle { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-base); border-radius: 0.375rem; color: var(--text-muted); background: transparent; cursor: pointer; } #hub-upload-debug .hud-toggle:hover { background: var(--surface-sunken); color: var(--text-body); } /* ── Raw JSON block ──────────────────────────────────────────────────── */ #hub-upload-debug .hud-raw { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.75rem; line-height: 1.55; background: var(--surface-sunken); color: var(--text-body); border: 1px solid var(--border-faint); border-radius: 0.5rem; padding: 0.75rem; overflow: auto; max-height: 40vh; } /* ── Empty states ────────────────────────────────────────────────────── */ #hub-upload-debug .hud-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 1rem; color: var(--text-faint); } #hub-upload-debug .hud-empty .material-symbols-outlined { font-size: 2.25rem; margin-bottom: 0.5rem; } #hub-upload-debug .hud-empty-title { font-weight: 600; color: var(--text-body); } #hub-upload-debug .hud-empty-alert .material-symbols-outlined { color: var(--accent-amber); } #hub-upload-debug .hud-empty-error .material-symbols-outlined { color: var(--action-danger-bg); } /* ── Live pulse (selected day == today) ──────────────────────────────── */ #hub-upload-debug .hud-live { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: var(--hud-signal); animation: hudPulse 1.8s infinite; } @keyframes hudPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hud-signal) 55%, transparent); } 70% { box-shadow: 0 0 0 0.5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ── HTMX scan indicator ─────────────────────────────────────────────── */ #hub-upload-debug .hud-scan { color: var(--hud-signal); opacity: 0; transition: opacity 0.15s; } #hub-upload-debug.htmx-request .hud-scan, #hub-upload-debug .htmx-request .hud-scan { opacity: 1; } #hub-upload-debug .hud-truncated { color: var(--accent-amber); } #hub-upload-debug [x-cloak] { display: none; }