| :root { |
| color-scheme: light; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| background: #f5f7fb; |
| color: #17202f; |
| font-synthesis: none; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| min-width: 320px; |
| min-height: 100vh; |
| background: |
| linear-gradient(180deg, #f7f9fc 0%, #edf2f7 100%); |
| } |
|
|
| button, |
| textarea, |
| input { |
| font: inherit; |
| } |
|
|
| button { |
| border: 0; |
| } |
|
|
| .app-shell { |
| width: min(1500px, 100%); |
| margin: 0 auto; |
| padding: 22px; |
| } |
|
|
| .topbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 4px 0 18px; |
| } |
|
|
| .eyebrow, |
| .panel-title, |
| .control-label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .eyebrow { |
| color: #54637a; |
| font-size: 0.78rem; |
| font-weight: 750; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| } |
|
|
| h1 { |
| margin: 6px 0 0; |
| font-size: clamp(1.9rem, 4vw, 3rem); |
| line-height: 1; |
| letter-spacing: 0; |
| } |
|
|
| .icon-button, |
| .primary-button, |
| .source-toggle, |
| .hit-row { |
| cursor: pointer; |
| transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; |
| } |
|
|
| .icon-button { |
| display: grid; |
| place-items: center; |
| width: 42px; |
| height: 42px; |
| border: 1px solid #cdd6e3; |
| border-radius: 8px; |
| background: #ffffff; |
| color: #34425a; |
| } |
|
|
| .icon-button:hover, |
| .primary-button:hover, |
| .source-toggle:hover, |
| .hit-row:hover { |
| transform: translateY(-1px); |
| } |
|
|
| .status-strip { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 12px; |
| margin-bottom: 16px; |
| } |
|
|
| .metric, |
| .code-pane, |
| .query-pane, |
| .results-pane, |
| .detail-pane { |
| border: 1px solid #d8e0ec; |
| border-radius: 8px; |
| background: #ffffff; |
| box-shadow: 0 12px 30px rgba(45, 60, 85, 0.08); |
| } |
|
|
| .metric { |
| display: flex; |
| gap: 10px; |
| align-items: center; |
| min-width: 0; |
| padding: 14px; |
| } |
|
|
| .metric svg { |
| color: #2f6fed; |
| flex: 0 0 auto; |
| } |
|
|
| .metric span { |
| display: block; |
| color: #68758a; |
| font-size: 0.76rem; |
| } |
|
|
| .metric strong { |
| display: block; |
| margin-top: 2px; |
| color: #101828; |
| font-size: 1.05rem; |
| } |
|
|
| .workbench { |
| display: grid; |
| grid-template-columns: minmax(360px, 1.2fr) 340px minmax(360px, 1fr); |
| gap: 16px; |
| align-items: start; |
| } |
|
|
| .code-pane, |
| .query-pane, |
| .results-pane, |
| .detail-pane { |
| min-height: 560px; |
| padding: 16px; |
| } |
|
|
| .panel-title { |
| height: 30px; |
| color: #24324a; |
| font-size: 0.92rem; |
| font-weight: 800; |
| } |
|
|
| textarea { |
| width: 100%; |
| min-height: 180px; |
| margin-top: 12px; |
| resize: vertical; |
| border: 1px solid #cfd8e6; |
| border-radius: 8px; |
| outline: 0; |
| padding: 12px; |
| background: #fbfcfe; |
| color: #17202f; |
| line-height: 1.55; |
| } |
|
|
| textarea:focus, |
| input:focus { |
| border-color: #2f6fed; |
| box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12); |
| } |
|
|
| .code-input { |
| min-height: 380px; |
| font: 12px/1.55 "Cascadia Code", "SFMono-Regular", Consolas, monospace; |
| tab-size: 4; |
| } |
|
|
| .question-input { |
| min-height: 150px; |
| } |
|
|
| .filename-field { |
| margin-top: 12px; |
| } |
|
|
| .control-group { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 10px; |
| margin-top: 14px; |
| } |
|
|
| .control-label { |
| grid-column: 1 / -1; |
| color: #5d6b80; |
| font-size: 0.78rem; |
| font-weight: 800; |
| text-transform: uppercase; |
| } |
|
|
| label { |
| display: grid; |
| gap: 6px; |
| color: #5d6b80; |
| font-size: 0.78rem; |
| font-weight: 700; |
| } |
|
|
| input { |
| width: 100%; |
| border: 1px solid #cfd8e6; |
| border-radius: 8px; |
| padding: 9px 10px; |
| background: #fbfcfe; |
| color: #17202f; |
| } |
|
|
| .source-grid { |
| display: grid; |
| gap: 8px; |
| margin-top: 16px; |
| } |
|
|
| .source-toggle { |
| display: grid; |
| grid-template-columns: 20px 1fr auto; |
| align-items: center; |
| gap: 8px; |
| width: 100%; |
| border: 1px solid #d7dfeb; |
| border-radius: 8px; |
| padding: 10px; |
| background: #f8fafc; |
| color: #2e3c53; |
| text-align: left; |
| } |
|
|
| .source-toggle.active { |
| border-color: #2f6fed; |
| background: #eef4ff; |
| } |
|
|
| .source-toggle small { |
| color: #68758a; |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .primary-button { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 8px; |
| width: 100%; |
| margin-top: 16px; |
| border-radius: 8px; |
| padding: 12px; |
| background: #2f6fed; |
| color: #ffffff; |
| font-weight: 850; |
| } |
|
|
| .primary-button:disabled, |
| .icon-button:disabled { |
| cursor: wait; |
| opacity: 0.58; |
| transform: none; |
| } |
|
|
| .notice, |
| .error-box, |
| .empty-state { |
| margin-top: 14px; |
| border-radius: 8px; |
| padding: 12px; |
| font-size: 0.86rem; |
| line-height: 1.5; |
| } |
|
|
| .notice { |
| border: 1px solid #b9d0fb; |
| background: #eef4ff; |
| color: #27559f; |
| } |
|
|
| .error-box { |
| border: 1px solid #f1b8b8; |
| background: #fff1f1; |
| color: #9f2d2d; |
| } |
|
|
| .success-box { |
| margin-top: 14px; |
| border: 1px solid #a7e1b7; |
| border-radius: 8px; |
| padding: 12px; |
| background: #effcf3; |
| color: #22663a; |
| font-size: 0.82rem; |
| line-height: 1.45; |
| overflow-wrap: anywhere; |
| } |
|
|
| .empty-state { |
| display: grid; |
| min-height: 220px; |
| place-items: center; |
| border: 1px dashed #cbd5e1; |
| background: #f8fafc; |
| color: #66758b; |
| text-align: center; |
| } |
|
|
| .hit-list { |
| display: grid; |
| gap: 8px; |
| margin-top: 12px; |
| } |
|
|
| .hit-row { |
| display: grid; |
| grid-template-columns: 32px minmax(0, 1fr) auto 58px; |
| align-items: center; |
| gap: 10px; |
| width: 100%; |
| border: 1px solid #d7dfeb; |
| border-radius: 8px; |
| padding: 10px; |
| background: #ffffff; |
| color: #17202f; |
| text-align: left; |
| } |
|
|
| .hit-row.active { |
| border-color: #2f6fed; |
| background: #f1f6ff; |
| } |
|
|
| .rank { |
| display: grid; |
| place-items: center; |
| width: 26px; |
| height: 26px; |
| border-radius: 50%; |
| background: #e9edf5; |
| color: #4b5b73; |
| font-size: 0.76rem; |
| font-weight: 850; |
| } |
|
|
| .hit-main { |
| min-width: 0; |
| } |
|
|
| .hit-main strong, |
| .hit-main small { |
| display: block; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .hit-main strong { |
| color: #152238; |
| font-size: 0.9rem; |
| } |
|
|
| .hit-main small { |
| margin-top: 3px; |
| color: #68758a; |
| font-size: 0.74rem; |
| } |
|
|
| .source-pill { |
| border-radius: 999px; |
| padding: 5px 8px; |
| background: #e8eef8; |
| color: #34425a; |
| font-size: 0.72rem; |
| font-weight: 800; |
| white-space: nowrap; |
| } |
|
|
| .source-pill.raw_code, |
| .bar-fill.raw_code { |
| background: #dbeafe; |
| color: #1d4ed8; |
| } |
|
|
| .source-pill.cross_file_propagated, |
| .bar-fill.cross_file_propagated { |
| background: #dcfce7; |
| color: #166534; |
| } |
|
|
| .source-pill.semantic_synthetic, |
| .bar-fill.semantic_synthetic { |
| background: #fae8ff; |
| color: #86198f; |
| } |
|
|
| .score { |
| color: #3e4f66; |
| font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; |
| font-size: 0.78rem; |
| text-align: right; |
| } |
|
|
| .detail-stack { |
| display: grid; |
| gap: 12px; |
| margin-top: 12px; |
| } |
|
|
| .wide-detail { |
| margin-top: 16px; |
| min-height: 0; |
| } |
|
|
| .detail-grid { |
| display: grid; |
| grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.1fr) minmax(360px, 1.1fr); |
| gap: 12px; |
| align-items: start; |
| margin-top: 12px; |
| } |
|
|
| .detail-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| border-bottom: 1px solid #e2e8f0; |
| padding-bottom: 12px; |
| } |
|
|
| .detail-header h2 { |
| margin: 0; |
| color: #121c2d; |
| font-size: 1.15rem; |
| letter-spacing: 0; |
| } |
|
|
| .detail-header p { |
| margin: 5px 0 0; |
| color: #68758a; |
| font-size: 0.82rem; |
| overflow-wrap: anywhere; |
| } |
|
|
| .score-card, |
| .code-card { |
| border: 1px solid #dfe6f1; |
| border-radius: 8px; |
| background: #fbfcfe; |
| padding: 12px; |
| } |
|
|
| .score-card h3, |
| .code-card h3 { |
| margin: 0 0 10px; |
| color: #35445b; |
| font-size: 0.84rem; |
| } |
|
|
| .score-bars { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .bar-row { |
| display: grid; |
| grid-template-columns: 132px minmax(90px, 1fr) 58px; |
| align-items: center; |
| gap: 10px; |
| font-size: 0.78rem; |
| } |
|
|
| .bar-row span { |
| color: #516077; |
| } |
|
|
| .bar-row strong { |
| color: #26364f; |
| font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; |
| text-align: right; |
| } |
|
|
| .bar-track { |
| height: 8px; |
| overflow: hidden; |
| border-radius: 999px; |
| background: #e3e9f2; |
| } |
|
|
| .bar-fill { |
| height: 100%; |
| border-radius: inherit; |
| } |
|
|
| .matched-text { |
| margin: 0; |
| color: #26364f; |
| line-height: 1.55; |
| } |
|
|
| .scope-chip { |
| display: inline-block; |
| margin-top: 10px; |
| border-radius: 999px; |
| padding: 5px 8px; |
| background: #eef4ff; |
| color: #285ca8; |
| font-size: 0.74rem; |
| font-weight: 800; |
| } |
|
|
| .evidence-list { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| margin-top: 10px; |
| } |
|
|
| .evidence-list code { |
| border: 1px solid #dce3ee; |
| border-radius: 6px; |
| padding: 4px 6px; |
| background: #ffffff; |
| color: #46566e; |
| font-size: 0.72rem; |
| } |
|
|
| pre { |
| max-height: 460px; |
| margin: 0; |
| overflow: auto; |
| border-radius: 6px; |
| padding: 12px; |
| background: #101827; |
| color: #d9e4f2; |
| font: 12px/1.55 "Cascadia Code", "SFMono-Regular", Consolas, monospace; |
| white-space: pre; |
| } |
|
|
| @media (max-width: 1200px) { |
| .workbench { |
| grid-template-columns: minmax(0, 1fr) 340px; |
| } |
|
|
| .results-pane { |
| grid-column: 1 / -1; |
| } |
|
|
| .detail-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 760px) { |
| .app-shell { |
| padding: 14px; |
| } |
|
|
| .status-strip, |
| .workbench { |
| grid-template-columns: 1fr; |
| } |
|
|
| .query-pane, |
| .code-pane, |
| .results-pane, |
| .detail-pane { |
| min-height: auto; |
| } |
|
|
| .hit-row { |
| grid-template-columns: 28px minmax(0, 1fr); |
| } |
|
|
| .hit-row .source-pill, |
| .hit-row .score { |
| justify-self: start; |
| margin-left: 38px; |
| } |
|
|
| .bar-row { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
