/* ---- Results: sub-tabs (Hits / Analytics / Workflow flow / Stage outputs) ---- */
.res-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.res-tab{
  font-family:inherit; border:1px solid var(--line); background:var(--panel); color:var(--border);
  border-radius:8px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer;
}
.res-tab:hover{ background:var(--bg); }
.res-tab.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.res-subview{ display:none; flex-direction:column; gap:12px; }
.res-subview.active{ display:flex; }
.stage-tab-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

.filter-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-bar input[type=text]{ max-width:220px; }
.thumb{ width:48px; height:36px; }
.thumb svg{ width:100%; height:100%; }
.res-name{ font-weight:700; }
.res-id{ font-size:11px; color:var(--muted); }
.selbar{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--panel); border:1px solid var(--line); border-radius:8px; flex-wrap:wrap; }
.selbar .count{ font-weight:700; font-size:13px; }
.selbar .spacer{ flex:1; }

.viz-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:stretch; }
.viz-grid .section{ display:flex; flex-direction:column; min-width:0; }
.viz-grid svg{ width:100%; height:auto; min-height:240px; }
.legend{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:var(--muted); }
.legend .lk{ display:inline-flex; align-items:center; gap:5px; }
.legend .sw{ width:9px; height:9px; border-radius:2px; }

/* ---- Results: query panel + flippable hit-card grid ---- */
/* ---- Hits page: results grid + integrated, toggleable Analytics sidebar
   (a real flex column that shares/pushes space, not a modal overlay) ---- */
.hits-workspace{ display:flex; gap:14px; align-items:flex-start; }
.hits-workspace > .results-layout{ flex:1 1 auto; min-width:0; }
.hits-analytics-sidebar{
  flex:0 0 0px; width:0; min-width:0; overflow:hidden; opacity:0; padding:0;
  background:var(--bg); border:1px solid transparent; border-radius:12px;
  transition:flex-basis .22s ease, width .22s ease, opacity .18s ease, padding .22s ease;
}
.hits-analytics-sidebar.open{ flex:0 0 420px; width:420px; opacity:1; padding:14px 15px; border-color:var(--line); }
.hits-analytics-sidebar-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
#hitsAnalyticsTabStrip{ margin-bottom:12px; flex-wrap:wrap; }
.hits-analytics-sidebar-body{ min-width:380px; }
/* One chart section visible at a time in the sidebar (tabs), even though
   the SAME markup renders as a 2-column grid when docked in the full-width
   Analytics tab instead — context-scoped via this descendant selector, no
   change to the shared chart-rendering functions or their target IDs. */
.hits-analytics-sidebar-body .viz-grid{ display:block; }
.hits-analytics-sidebar-body .analytics-chart-section{ display:none; }
.hits-analytics-sidebar-body .analytics-chart-section.chart-tab-active{ display:block; }
.hits-analytics-sidebar-body svg{ min-height:220px; }

.results-layout{ display:grid; grid-template-columns:250px 1fr; gap:14px; align-items:start; }
.query-panel{ position:sticky; top:0; display:flex; flex-direction:column; gap:12px; }
.query-panel .mol-box{ width:100%; height:140px; cursor:pointer; }
.query-panel .mol-box:hover{ border-color:var(--accent); }
.query-panel .field-note{ margin-top:6px; }
.query-props{ display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; font-size:11.5px; margin-top:2px; }
.run-summary-dl{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px; font-size:12.5px; }
.run-summary-dl dt{ color:var(--muted); font-weight:600; white-space:nowrap; }
/* min-width:0 is required here — a CSS grid track sized 1fr still respects
   its content's intrinsic max-content width (a long unbroken SMILES string
   has no natural break point) unless the item's own min-width is reset,
   which is what was letting long SMILES/pipeline text overflow the card. */
.run-summary-dl dd{ margin:0; font-weight:600; min-width:0; overflow-wrap:break-word; word-break:break-word; }
.run-summary-dl dd.pipeline-chain{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-weight:700; }
.run-summary-dl dd.pipeline-chain .stage-tag{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:2px 8px; font-size:11.5px; }
.run-summary-dl dd.pipeline-chain .chain-arrow{ color:var(--muted); }
.query-props .qp-item{ display:flex; justify-content:space-between; gap:6px; }
.query-props .qp-label{ color:var(--muted); }
.query-props .qp-value{ font-weight:700; font-variant-numeric:tabular-nums; }
.selection-mini{ display:flex; flex-direction:column; gap:8px; }
.selection-mini .count-line{ font-size:12.5px; font-weight:700; }
.selection-mini .btn{ width:100%; justify-content:flex-start; }

.cardgrid-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.hitcard-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:10px; }
.hitcard{ perspective:900px; height:186px; cursor:pointer; }
.hitcard-inner{ position:relative; width:100%; height:100%; transition:transform .45s; transform-style:preserve-3d; }
.hitcard.flipped .hitcard-inner{ transform:rotateY(180deg); }
.hitcard-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:7px; display:flex; flex-direction:column;
}
.hitcard:hover .hitcard-face{ border-color:var(--accent); }
.hitcard-back{ transform:rotateY(180deg); font-size:11px; }
/* Score badge used to float absolute over the bottom-left corner, on top
   of the name text below the structure — on longer names the two
   genuinely overlapped and made the name unreadable. Moved into a real
   top row (checkbox / score / flip) instead of layering things that both
   want the same corner. */
.hitcard-top-row{ display:flex; align-items:center; justify-content:space-between; gap:4px; flex:none; }
.hitcard-checkbox{ accent-color:var(--accent); flex:none; }
.hitcard-score-badge{
  font-size:10.5px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums;
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:1px 6px; flex:none;
}
/* Consensus/Hybrid's badge is a fused rank, not raw similarity — visible
   at a glance (not hover-only) so "1.000" is never read as "identical
   structure" on sight, which is exactly what prompted this. */
.hitcard-score-qualifier{ font-size:7.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; opacity:0.65; margin-right:2px; }
.hitcard-mol{ flex:1; min-height:0; background:transparent; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-top:2px; }
.hitcard-mol svg{ width:96%; height:96%; }
.hitcard-name{ font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:6px; flex:none; }
.hitcard-query-tag{ font-size:9.5px; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
.hitcard-flip-btn{
  width:20px; height:20px; border-radius:50%; border:1px solid var(--line); flex:none;
  background:var(--panel); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.hitcard-flip-btn:hover{ border-color:var(--accent); color:var(--accent); }
.hitcard-flip-btn svg{ width:12px; height:12px; }
.hitcard-back dl{ margin:6px 0 0; display:grid; grid-template-columns:1fr auto; gap:3px 6px; }
.hitcard-back dt{ color:var(--muted); }
.hitcard-back dd{ margin:0; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.hitcard-score-breakdown{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.score-breakdown-title{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:3px; }
.score-breakdown-list{ margin:0; display:grid; grid-template-columns:1fr auto; gap:2px 6px; }
.score-breakdown-list dt{ color:var(--muted); }
.score-breakdown-list dd{ margin:0; text-align:right; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.hitcard.in-selection .hitcard-face{ box-shadow:0 0 0 2px var(--accent) inset; }

.pagination{ display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:12px; font-size:12.5px; color:var(--muted); }
.pagination .btn{ height:28px; min-height:28px; padding:0 10px; font-size:12px; }

.compare-panel{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.viewer-mol{ background:transparent; border:1px solid var(--line); border-radius:8px; height:200px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.viewer-mol .vs-label{ position:absolute; top:8px; left:10px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.viewer-mol svg{ width:92%; height:92%; }
.compare-table td, .compare-table th{ padding:6px 10px; }

.qdetail-viewer{ background:transparent; border:1px solid var(--line); border-radius:8px; height:280px; position:relative; overflow:hidden; }
.qdetail-viewer svg{ width:92%; height:92%; margin:4%; }
.qdetail-3d{ width:100%; height:100%; }
.qdetail-toggle{ display:flex; gap:6px; margin-bottom:10px; }
.qdetail-props{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; }
.qdetail-props .qd-item{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.qdetail-props .qd-label{ font-size:10.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.qdetail-props .qd-value{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }

/* ---- interactive chart selection ---- */
.brush-rect{ fill:rgba(30,122,111,0.14); stroke:var(--accent); stroke-width:1; stroke-dasharray:3 2; pointer-events:none; }
.chart-hint{ font-size:11px; color:var(--muted); margin-top:6px; }
.bin-active{ stroke:var(--accent); stroke-width:2; }

@media (max-width: 980px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .viz-grid{ grid-template-columns:1fr; }
  .compare-panel{ grid-template-columns:1fr; }
  .results-layout{ grid-template-columns:1fr; }
  .hits-workspace{ flex-direction:column; }
  .hits-analytics-sidebar.open{ flex-basis:auto; width:100%; }
  .hits-analytics-sidebar-body{ min-width:0; }
}