/* Analysis surfaces: filters, summaries, tables, diagram, inspector. */
.filterbar {
  gap: 8px;
  padding: 0 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
body[data-view="source"] #view-source { display: block; overflow: auto; }
.filterbar > * { flex: 0 0 auto; }
.chip { height: 26px; padding: 0 8px; border-radius: 5px; font-size: 10.5px; }
.chip[aria-pressed="false"] { opacity: .46; background: transparent; }
.fb-multi-trigger,
.fb-search,
.fb-select,
.fb-reset { height: 30px; border-radius: 5px; }
.fb-search { width: min(260px, 22vw); }
.fb-search input { font-size: 11.5px; }
.active-filter { height: 26px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: 5px; background: color-mix(in srgb, var(--brand) 10%, var(--bg-2)); color: var(--brand-2); font-size: 10.5px; }
.fb-reset { padding: 0 8px; }

.overview-grid,
.view-body { max-width: 1600px; margin: 0 auto; padding: 20px 24px 32px; }
.overview-grid { gap: 12px; }
.ov-card,
.mit-card,
.data-table { border-radius: 9px; background: var(--bg-2); box-shadow: none; }
.ov-card { padding: 15px 16px; }
.ov-card h3 { margin-bottom: 9px; font-size: 9.5px; letter-spacing: .08em; }
.ov-project { padding: 18px 20px; }
.ov-project h2 { font-size: 20px; letter-spacing: -.02em; }
.ov-project p { margin-top: 5px; font-size: 12px; }
.ov-project-meta { margin-top: 9px; gap: 14px; font-size: 10.5px; }
.ov-severity { grid-column: span 6; }
.ov-coverage { grid-column: span 3; }
.ov-abuse { grid-column: span 3; }
.ov-top { grid-column: span 7; }
.ov-zones { grid-column: span 5; }
.ov-assets { grid-column: span 4; }
.ov-risk { grid-column: span 8; }
.simple-list li { min-height: 31px; padding: 5px 0; font-size: 11.5px; }
.sev-bar { height: 8px; margin-bottom: 10px; border-radius: 2px; }
.sev-legend { font-size: 10.5px; }
.ring { width: 58px; height: 58px; }
.ring::after { inset: 7px; font-size: 12px; }
.ring-meta { font-size: 11px; }

.view-head { margin-bottom: 12px; }
.view-title { font-size: 17px; letter-spacing: -.015em; }
.view-sub { margin-top: 2px; font-size: 10.5px; }
.data-table { font-size: 11.5px; }
.data-table thead th { padding: 8px 10px; background: var(--bg-3); font-size: 9px; letter-spacing: .07em; }
.data-table tbody td { padding: 9px 10px; }
.data-table td .row-name { font-size: 11.5px; }
.data-table td .row-sub { font-size: 10.5px; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr.sev-row-critical td:first-child { box-shadow: inset 2px 0 var(--sev-critical); }
.data-table tbody tr.sev-row-high td:first-child { box-shadow: inset 2px 0 var(--sev-high); }
.data-table tbody tr.sev-row-medium td:first-child { box-shadow: inset 2px 0 var(--sev-medium); }
.data-table tbody tr.sev-row-low td:first-child { box-shadow: inset 2px 0 var(--sev-low); }
.data-table tbody tr.sev-row-info td:first-child { box-shadow: inset 2px 0 var(--sev-info); }
.sev-badge,
.tag-pill,
.zone-pill { border-radius: 4px; font-size: 9.5px; }

.view-threats .view-body { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 12px; align-items: start; }
.view-threats .view-head { grid-column: 1 / -1; }
.view-threats .data-table { grid-column: 1; grid-row: 2; }
.view-threats .ov-card { grid-column: 2; grid-row: 2; margin: 0 !important; position: sticky; top: 12px; }
.view-threats .matrix { min-height: 185px; gap: 3px; }
.view-threats .matrix-cell { font-size: 10px; }

.matrix { min-height: 205px; gap: 3px; }
.matrix-cell { border-radius: 4px; font-size: 11px; transition: border-color 80ms, box-shadow 80ms; }
.matrix-cell:hover { transform: none; border-color: var(--text-3); box-shadow: inset 0 0 0 1px var(--text-3); }

.mit-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mit-card { padding: 13px; }
.mit-card:hover { transform: none; border-color: var(--brand-2); }

.canvas {
  background-color: var(--bg);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-3) 22%, transparent) .8px, transparent .8px);
  background-size: 20px 20px;
}
.diagram-legend { position: absolute; z-index: 10; left: 14px; top: 14px; display: flex; align-items: center; gap: 11px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--bg-2) 94%, transparent); color: var(--text-3); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; }
.diagram-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend-node { width: 9px; height: 9px; border: 1.5px solid; border-radius: 2px; }
.legend-node.service { border-color: #7777df; background: rgba(119,119,223,.14); }
.legend-node.data { border-color: #3b9f9f; background: rgba(59,159,159,.14); }
.legend-node.external { border-color: #c08352; background: rgba(192,131,82,.14); }
.legend-risk { width: 7px; height: 7px; border-radius: 50%; background: var(--sev-critical); }
.legend-divider { width: 1px; height: 13px; background: var(--border); }
.canvas-toolbar { left: 14px; bottom: 14px; padding: 3px; border-radius: 7px; }
.minimap { right: 14px !important; bottom: 14px !important; border-radius: 7px; }

.inspector { background: var(--bg-2); box-shadow: -12px 0 36px rgba(0, 0, 0, .18); }
.insp-head { min-height: 48px; padding: 0 16px; background: var(--bg-3); }
.insp-body { padding: 18px 20px 28px; }
.d-title { font-size: 17px; }
.d-icon { width: 34px; height: 34px; border-radius: 7px; }
.d-list li { padding: 7px 8px; border-radius: 5px; }

.modal-body { padding: 22px; border-radius: 10px; }
.modal-body header h3 { margin-top: 4px; font-size: 18px; }
.modal-body textarea { min-height: 300px; padding: 14px; border-radius: 6px; }
.modal-hint { color: var(--text-3); font-size: 10.5px; }

@media (max-width: 1280px) {
  .project-tag-name { max-width: 140px; }
  .fb-divider { display: none; }
  .filterbar { overflow-x: auto; scrollbar-width: none; }
}

@media (max-width: 1080px) {
  .view-threats .view-body { grid-template-columns: 1fr; }
  .view-threats .view-head,
  .view-threats .data-table,
  .view-threats .ov-card { grid-column: 1; grid-row: auto; }
  .view-threats .ov-card { position: static; }
  .view-threats .matrix { min-height: 140px; }
}

@media (max-width: 900px) {
  .overview-grid,
  .view-body { padding: 14px; }
  .overview-grid { grid-template-columns: 1fr; }
  .ov-project,
  .ov-severity,
  .ov-coverage,
  .ov-abuse,
  .ov-top,
  .ov-zones,
  .ov-risk,
  .ov-assets { grid-column: 1; }
}

@media (max-width: 760px) {
  .filterbar { padding: 0 8px; }
  .fb-search { min-width: 160px; }
  .data-table { display: block; overflow-x: auto; }
  .diagram-legend { display: none; }
  .inspector { top: var(--topbar-h); width: min(100%, 480px); }
}

@media (max-width: 520px) {
  .intake-head h1 { font-size: 20px; }
  .editor-panel { grid-template-rows: 42px 1fr auto; min-height: 450px; }
  #empty-paste-textarea { min-height: 320px; }
  .editor-footer { align-items: stretch; flex-direction: column; padding: 10px; }
  .editor-footer .btn { justify-content: center; }
  .dropdown-menu.wide { position: fixed; left: 8px; right: 8px; top: var(--topbar-h); min-width: 0; }
}