/* Signal UI foundation. Query-gated by bootstrap.js via . */ .signal-shell { display: none; } .nx-signal .page { display: grid; gap: 18px; } .nx-signal .hero { max-width: 1180px; margin: 0 auto; padding: 18px; border: 1px solid var(--border-2, rgba(255, 255, 255, 0.09)); border-radius: var(--radius-md, 6px); background: var(--surface-1, #161a22); box-shadow: var(--shadow-1, 0 1px 2px rgba(0, 0, 0, 0.4)); } .nx-signal .hero-tag, .nx-signal .hero h1, .nx-signal .hero > p { display: none; } .nx-signal .search-container { margin: 0; } .nx-signal #scanStatus { display: none; } .nx-signal #results { display: none; } .nx-signal .signal-shell { display: grid; gap: 14px; width: min(1180px, calc(100vw - 32px)); margin: 0 auto 28px; color: var(--text-1, #e8ecf3); font: 400 var(--text-md, 0.875rem) / 1.5 var(--font-body, system-ui, sans-serif); } .signal-dossier, .signal-panel { border: 1px solid var(--border-2, rgba(255, 255, 255, 0.09)); border-radius: var(--radius-md, 6px); background: var(--surface-1, #161a22); box-shadow: var(--shadow-1, 0 1px 2px rgba(0, 0, 0, 0.4)); } .signal-dossier { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 132px; padding: 18px; } .signal-kicker { margin: 0 0 6px; color: var(--accent, #c4451d); font: 700 var(--text-xs, 0.75rem) / 1.2 var(--font-data, monospace); letter-spacing: 0; text-transform: uppercase; } .signal-dossier h2, .signal-panel h3 { margin: 0; color: var(--text-1, #e8ecf3); font-family: var(--font-display, system-ui, sans-serif); letter-spacing: 0; } .signal-dossier h2 { font-size: var(--text-2xl, 1.625rem); line-height: 1.15; } .signal-panel h3 { font-size: var(--text-lg, 1rem); line-height: 1.2; } .signal-muted, .signal-empty p, .signal-layer p { margin: 6px 0 0; color: var(--text-2, #9ba3b5); font-size: var(--text-sm, 0.8125rem); } .signal-dossier__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; width: min(560px, 100%); } .signal-output-list { display: flex; flex-wrap: wrap; gap: 8px; } .signal-dossier__datum { display: grid; gap: 3px; min-width: 0; padding: 8px 9px; border: 1px solid var(--border-1, rgba(255, 255, 255, 0.05)); border-radius: var(--radius-sm, 4px); color: var(--text-2, #9ba3b5); background: var(--surface-2, #1d2230); } .signal-dossier__datum-label { color: var(--text-3, #5d6478); font: 700 var(--text-2xs, 0.6875rem) / 1.1 var(--font-data, monospace); text-transform: uppercase; } .signal-dossier__datum-value { min-width: 0; overflow-wrap: anywhere; color: var(--text-1, #e8ecf3); font: 700 var(--text-xs, 0.75rem) / 1.3 var(--font-data, monospace); } .signal-pill, .signal-count { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border: 1px solid var(--border-2, rgba(255, 255, 255, 0.09)); border-radius: var(--radius-pill, 999px); color: var(--text-2, #9ba3b5); background: var(--surface-2, #1d2230); font: 700 var(--text-xs, 0.75rem) / 1 var(--font-data, monospace); white-space: nowrap; } .signal-pill--idle { color: var(--text-2, #9ba3b5); } .signal-pill--likely { color: var(--status-likely, #c19443); border-color: color-mix(in srgb, var(--status-likely, #c19443) 45%, transparent); } .signal-pill--blocked { color: var(--status-blocked, #8b6a5e); border-color: color-mix(in srgb, var(--status-blocked, #8b6a5e) 45%, transparent); } .signal-pill--found, .signal-layer--found .signal-layer__dot { color: var(--status-found, #6ba368); border-color: color-mix(in srgb, var(--status-found, #6ba368) 45%, transparent); } .signal-pill--error, .signal-layer--error .signal-layer__dot { color: var(--status-error, #c4451d); border-color: color-mix(in srgb, var(--status-error, #c4451d) 45%, transparent); } .signal-pill--not-found, .signal-layer--not_found .signal-layer__dot { color: var(--status-not-found, #5d6478); border-color: color-mix(in srgb, var(--status-not-found, #5d6478) 45%, transparent); } .signal-pill--uncertain, .signal-layer--uncertain .signal-layer__dot { color: var(--status-uncertain, #b7884a); border-color: color-mix(in srgb, var(--status-uncertain, #b7884a) 45%, transparent); } .signal-pill--running, .signal-layer--running .signal-layer__dot { color: var(--accent, #c4451d); border-color: color-mix(in srgb, var(--accent, #c4451d) 45%, transparent); } .signal-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.75fr); grid-template-areas: "layers evidence" "layers cases"; gap: 14px; } .signal-panel { min-width: 0; padding: 16px; } .signal-panel--layers { grid-area: layers; } .signal-panel--evidence { grid-area: evidence; } .signal-panel--cases { grid-area: cases; } .signal-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .signal-layer-grid { display: grid; gap: 10px; } .signal-layer { display: flex; gap: 12px; min-height: 86px; padding: 12px; border: 1px solid var(--border-1, rgba(255, 255, 255, 0.05)); border-radius: var(--radius-sm, 4px); background: var(--surface-2, #1d2230); } .signal-layer--empty { border-style: dashed; background: color-mix(in srgb, var(--surface-2, #1d2230) 76%, transparent); } .signal-layer--empty .signal-layer__dot { opacity: 0.32; box-shadow: none; } .signal-layer--found, .signal-layer--likely, .signal-layer--blocked, .signal-layer--error, .signal-layer--not_found, .signal-layer--uncertain, .signal-layer--running { border-color: color-mix(in srgb, currentColor 24%, var(--border-1, rgba(255, 255, 255, 0.05))); } .signal-layer--found { color: var(--status-found, #6ba368); } .signal-layer--likely { color: var(--status-likely, #c19443); } .signal-layer--blocked { color: var(--status-blocked, #8b6a5e); } .signal-layer--error { color: var(--status-error, #c4451d); } .signal-layer--not_found { color: var(--status-not-found, #5d6478); } .signal-layer--uncertain { color: var(--status-uncertain, #b7884a); } .signal-layer--running { color: var(--accent, #c4451d); } .signal-layer--found .signal-layer__dot, .signal-layer--likely .signal-layer__dot, .signal-layer--blocked .signal-layer__dot, .signal-layer--error .signal-layer__dot, .signal-layer--not_found .signal-layer__dot, .signal-layer--uncertain .signal-layer__dot, .signal-layer--running .signal-layer__dot { background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent); } .signal-layer__body { min-width: 0; flex: 1; color: var(--text-2, #9ba3b5); } .signal-layer__top, .signal-evidence-row__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .signal-layer__name, .signal-evidence-row__title { overflow-wrap: anywhere; } .signal-layer__meta, .signal-evidence-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .signal-layer strong, .signal-empty strong { color: var(--text-1, #e8ecf3); font: 700 var(--text-sm, 0.8125rem) / 1.25 var(--font-display, system-ui, sans-serif); } .signal-layer__dot { width: 10px; height: 10px; margin-top: 5px; border-radius: var(--radius-pill, 999px); background: var(--text-3, #5d6478); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-3, #5d6478) 16%, transparent); flex: 0 0 auto; } .signal-layer__runtime, .signal-summary-stat, .signal-case-footnote { color: var(--text-3, #5d6478); font: 700 var(--text-xs, 0.75rem) / 1.35 var(--font-data, monospace); } .signal-layer__runtime { align-self: center; } .signal-layer-summary { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-1, rgba(255, 255, 255, 0.05)); } .signal-layer-summary__label { color: var(--text-3, #5d6478); font: 700 var(--text-xs, 0.75rem) / 1.2 var(--font-data, monospace); text-transform: uppercase; } .signal-summary-stat { display: inline-flex; align-items: center; gap: 5px; padding: 5px 0; color: var(--text-2, #9ba3b5); white-space: nowrap; } .signal-summary-stat::before { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-pill, 999px); background: currentColor; content: ""; } .signal-summary-stat--found { color: var(--status-found, #6ba368); } .signal-summary-stat--likely { color: var(--status-likely, #c19443); } .signal-summary-stat--blocked { color: var(--status-blocked, #8b6a5e); } .signal-summary-stat--error { color: var(--status-error, #c4451d); } .signal-summary-stat--running { color: var(--accent, #c4451d); } .signal-summary-stat--uncertain { color: var(--status-uncertain, #b7884a); } .signal-summary-stat--not_found { color: var(--status-not-found, #5d6478); } .signal-summary-stat--pending { color: var(--text-2, #9ba3b5); } .signal-empty { margin-top: 14px; padding: 12px; border: 1px dashed var(--border-2, rgba(255, 255, 255, 0.09)); border-radius: var(--radius-sm, 4px); background: color-mix(in srgb, var(--surface-2, #1d2230) 76%, transparent); } .signal-evidence-list { display: grid; gap: 10px; margin-top: 12px; } .signal-evidence-workspace { display: grid; gap: 12px; } .signal-evidence-row { min-width: 0; padding: 12px; border: 1px solid var(--border-1, rgba(255, 255, 255, 0.05)); border-radius: var(--radius-sm, 4px); background: var(--surface-2, #1d2230); } .signal-evidence-row { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; } .signal-evidence-row:hover, .signal-evidence-row:focus-visible, .signal-evidence-row--selected { border-color: color-mix(in srgb, var(--accent, #c4451d) 48%, var(--border-2, rgba(255, 255, 255, 0.09))); outline: none; } .signal-evidence-group { display: grid; gap: 8px; } .signal-evidence-group__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .signal-evidence-group__heading strong { color: var(--text-1, #e8ecf3); font: 700 var(--text-sm, 0.8125rem) / 1.25 var(--font-display, system-ui, sans-serif); } .signal-evidence-row p { margin: 8px 0 0; color: var(--text-2, #9ba3b5); font-size: var(--text-sm, 0.8125rem); overflow-wrap: anywhere; } .signal-evidence-empty-note { margin: 0; color: var(--text-2, #9ba3b5); font-size: var(--text-sm, 0.8125rem); } .signal-evidence-detail { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border-2, rgba(255, 255, 255, 0.09)); border-radius: var(--radius-sm, 4px); background: color-mix(in srgb, var(--surface-2, #1d2230) 82%, transparent); } .signal-evidence-detail__title { margin: 0; color: var(--text-1, #e8ecf3); font: 700 var(--text-md, 0.875rem) / 1.25 var(--font-display, system-ui, sans-serif); letter-spacing: 0; } .signal-evidence-detail__body { margin: 0; color: var(--text-2, #9ba3b5); font-size: var(--text-sm, 0.8125rem); overflow-wrap: anywhere; } .signal-case-list { display: grid; gap: 10px; } .signal-case-card { display: grid; gap: 9px; min-width: 0; padding: 12px; border: 1px solid var(--border-1, rgba(255, 255, 255, 0.05)); border-left: 3px solid var(--text-3, #5d6478); border-radius: var(--radius-sm, 4px); background: var(--surface-2, #1d2230); } .signal-case-card--found { border-left-color: var(--status-found, #6ba368); } .signal-case-card--likely { border-left-color: var(--status-likely, #c19443); } .signal-case-card--blocked { border-left-color: var(--status-blocked, #8b6a5e); } .signal-case-card--error { border-left-color: var(--status-error, #c4451d); } .signal-case-card--not-found { border-left-color: var(--status-not-found, #5d6478); } .signal-case-card--uncertain { border-left-color: var(--status-uncertain, #b7884a); } .signal-case-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .signal-case-card__top strong { color: var(--text-1, #e8ecf3); font: 700 var(--text-sm, 0.8125rem) / 1.25 var(--font-display, system-ui, sans-serif); } .signal-case-card__hash { color: var(--text-2, #9ba3b5); font: 700 var(--text-xs, 0.75rem) / 1.35 var(--font-data, monospace); overflow-wrap: anywhere; } .signal-case-card__meta { display: flex; flex-wrap: wrap; gap: 6px; } .signal-case-footnote { margin: 0; } @media (max-width: 840px) { .nx-signal .signal-shell { width: min(100%, calc(100vw - 24px)); } .signal-dossier { display: grid; } .signal-layout { grid-template-columns: 1fr; grid-template-areas: "layers" "evidence" "cases"; } } @media (max-width: 600px) { .nx-signal .hero, .signal-panel, .signal-dossier { padding: 12px; } .signal-dossier__meta { grid-template-columns: 1fr; } .signal-layer, .signal-layer__top, .signal-case-card__top, .signal-panel__header { align-items: flex-start; flex-wrap: wrap; } .signal-layer__meta, .signal-case-card__meta, .signal-output-list { max-width: 100%; overflow-wrap: anywhere; } .signal-pill, .signal-summary-stat, .signal-count { max-width: 100%; white-space: normal; } }