/* Computed objects: scalar fields and authored geometry in the object list.
   Styled to read as a sibling of the molecular tree, never as coordinates. */

.sw-objects-section[hidden] { display: none; }

.sw-object-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sw-object-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas: "toggle name" "toggle stale" "contours contours";
  align-items: start;
  gap: 4px 6px;
  padding: 8px 8px 9px;
  border: 1px solid var(--sw-line, rgba(16, 42, 38, .14));
  border-radius: 9px;
  background: var(--sw-surface-raised, rgba(14,25,23,.55));
}

.sw-object-row[data-visible="false"] { opacity: .52; }
.sw-object-row[data-stale="true"] { border-color: rgba(181, 63, 65, .5); }

.sw-object-row > .sw-tree-visibility { grid-area: toggle; }

.sw-object-name {
  grid-area: name;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.sw-object-name strong {
  font-size: .82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-object-name small {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  letter-spacing: .02em;
  opacity: .72;
}

.sw-object-name small i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sw-accent, #2f8f7f);
  flex: none;
}

.sw-object-name small i[data-kind="computed"] { background: #3b6fd4; }
.sw-object-name small i[data-kind="deposited"] { background: #2f8f7f; }
.sw-object-name small i[data-kind="derived"] { background: #b98b2f; }

.sw-object-stale {
  grid-area: stale;
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid rgba(181, 63, 65, .45);
  border-radius: 999px;
  background: rgba(181, 63, 65, .1);
  color: #8d2f31;
  font-size: .66rem;
  font-weight: 600;
  cursor: pointer;
}

.sw-object-contours {
  grid-area: contours;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.sw-object-contour {
  display: grid;
  grid-template-columns: auto 1fr 62px auto auto;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
}

.sw-object-contour > span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-object-contour > span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--sw-object-colour, currentColor);
  flex: none;
}

.sw-object-contour input[type="number"],
.sw-object-contour select {
  min-width: 0;
  padding: 2px 4px;
  border: 1px solid var(--sw-line, rgba(16, 42, 38, .18));
  border-radius: 5px;
  background: var(--sw-surface, #0f1514);
  font: inherit;
  font-size: .68rem;
  color: inherit;
}

.sw-object-remove {
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
}

.sw-object-remove:hover { opacity: 1; }

.sw-command-extra { margin-top: 14px; }
.sw-command-extra h4 { margin: 0 0 6px; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.sw-command-extra dl { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.sw-command-extra dl > div { display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: 10px; font-size: .74rem; }
.sw-command-extra dt { margin: 0; }
.sw-command-extra dd { margin: 0; opacity: .75; }

/* Ranked binding-pocket list. Rank colour is the same colour the envelope
   is drawn in, so the list and the viewport read as one thing. */

.sw-pocket-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.sw-pocket-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--sw-line, rgba(16, 42, 38, .14));
  border-radius: 9px;
  background: var(--sw-surface-raised, rgba(14,25,23,.55));
}

.sw-pocket-rank {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--sw-pocket-colour, #e0762d);
  color: #c4d2cc;
  font-size: .78rem;
  font-weight: 700;
}

.sw-pocket-figures,
.sw-pocket-lining {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: .75rem;
}

.sw-pocket-figures strong { font-size: .84rem; font-weight: 650; }

.sw-pocket-figures small,
.sw-pocket-lining small {
  font-size: .66rem;
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-pocket-actions { display: flex; gap: 6px; }

.sw-pocket-actions button {
  padding: 4px 9px;
  border: 1px solid var(--sw-line, rgba(16, 42, 38, .2));
  border-radius: 999px;
  background: var(--sw-surface, #0f1514);
  font: inherit;
  font-size: .69rem;
  color: inherit;
  cursor: pointer;
}

.sw-pocket-actions button:hover { border-color: var(--sw-accent, #2f8f7f); }

@media (max-width: 720px) {
  .sw-pocket-row { grid-template-columns: 30px 1fr; grid-template-areas: "rank figures" "lining lining" "actions actions"; }
  .sw-pocket-rank { grid-area: rank; }
  .sw-pocket-figures { grid-area: figures; }
  .sw-pocket-lining { grid-area: lining; }
  .sw-pocket-actions { grid-area: actions; }
}

/* Surface property legend. A colour is only useful with its numbers, so the
   legend rides on the viewport rather than staying inside the tool. */

.sw-surface-legend {
  position: absolute;
  left: 12px;
  bottom: 52px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 168px;
  max-width: 260px;
  padding: 8px 10px 9px;
  border: 1px solid var(--sw-line, rgba(16, 42, 38, .16));
  border-radius: 9px;
  background: color-mix(in srgb, var(--sw-surface, #0f1514) 88%, transparent);
  backdrop-filter: blur(6px);
  pointer-events: none;
  font-size: .68rem;
}

.sw-surface-legend-title { font-weight: 650; font-size: .72rem; }

.sw-surface-legend-bar {
  height: 9px;
  border-radius: 3px;
  background: var(--sw-legend-gradient, linear-gradient(to right, #333, #454c49));
}

.sw-surface-legend-scale { display: flex; justify-content: space-between; }
.sw-surface-legend-scale i { font-style: normal; font-variant-numeric: tabular-nums; opacity: .78; }

.sw-surface-legend-undefined { display: flex; align-items: center; gap: 5px; opacity: .72; }
.sw-surface-legend-undefined i { width: 9px; height: 9px; border-radius: 2px; }

.sw-property-legend { margin: 12px 0 0; }
.sw-property-legend figcaption { font-size: .74rem; font-weight: 650; margin-bottom: 5px; }
.sw-property-legend-bar { height: 11px; border-radius: 3px; }
.sw-property-legend-scale { display: flex; justify-content: space-between; margin-top: 3px; font-size: .68rem; font-variant-numeric: tabular-nums; opacity: .78; }
.sw-property-legend p { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; font-size: .68rem; opacity: .74; }
.sw-property-legend p i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.sw-property-legend-note { font-style: italic; }

/* Slab control, sitting with the other viewport view controls. */

.sw-view-slab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 6px;
  border: 1px solid var(--sw-line, rgba(16, 42, 38, .18));
  border-radius: 999px;
  font-size: .7rem;
}

.sw-view-slab[hidden] { display: none; }
.sw-view-slab-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.sw-view-slab-range { display: flex; align-items: center; }
.sw-view-slab-range input { width: 88px; accent-color: var(--sw-accent, #2f8f7f); }
.sw-view-slab output { min-width: 34px; font-variant-numeric: tabular-nums; opacity: .78; }

@media (max-width: 900px) { .sw-view-slab-range input { width: 58px; } }

/* Typed-interaction groups. */
.sw-interaction-group { margin-top: 12px; }
.sw-interaction-group h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: .76rem; font-weight: 650; }
.sw-interaction-group h4 span { padding: 1px 7px; border-radius: 999px; background: var(--sw-line, rgba(16, 42, 38, .12)); font-size: .68rem; font-weight: 600; }
.sw-interaction-group .sw-pocket-row { grid-template-columns: minmax(0, 1fr) auto; }

/* Ligand descriptor report. */
.sw-descriptor-report { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.sw-descriptor-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 14px; margin: 0; }
.sw-descriptor-values > div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--sw-line, rgba(16, 42, 38, .1)); font-size: .74rem; }
.sw-descriptor-values dt { margin: 0; opacity: .74; }
.sw-descriptor-values dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.sw-descriptor-rules { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: .74rem; }
.sw-descriptor-rules > li { padding: 8px 10px; border: 1px solid var(--sw-line, rgba(16, 42, 38, .14)); border-radius: 9px; }
.sw-descriptor-rules em { font-style: normal; font-weight: 650; }
.sw-descriptor-rules em[data-verdict="within"] { color: #2f8f7f; }
.sw-descriptor-rules em[data-verdict="outside"] { color: #b53f41; }
.sw-descriptor-rules em[data-verdict="incomplete"] { color: #b98b2f; }
.sw-descriptor-rules ul { margin: 5px 0 0; padding-left: 16px; font-size: .7rem; opacity: .82; }
.sw-descriptor-rules li[data-verdict="outside"] { color: #b53f41; }
.sw-descriptor-rules li[data-verdict="not-evaluated"] { opacity: .6; }
.sw-descriptor-rules small { display: block; margin-top: 5px; font-size: .66rem; font-style: italic; opacity: .62; }
.sw-descriptor-diagnostics { margin: 0; padding-left: 16px; font-size: .7rem; opacity: .78; }

/* Pharmacophore feature list. */
.sw-pharmacophore { margin-top: 12px; }
.sw-pharmacophore h4 { margin: 0 0 6px; font-size: .78rem; font-weight: 650; }
.sw-pharmacophore-features { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sw-pharmacophore-features li { display: grid; grid-template-columns: 11px auto 1fr; align-items: center; gap: 8px; font-size: .73rem; }
.sw-pharmacophore-features li > span { width: 11px; height: 11px; border-radius: 50%; background: var(--sw-feature-colour, #666); }
.sw-pharmacophore-features small { font-size: .67rem; opacity: .72; }
.sw-pharmacophore-features li[data-feature-state="unmatched"] { opacity: .55; }
.sw-pharmacophore-features li[data-feature-state="optional"] { opacity: .7; font-style: italic; }
.sw-pharmacophore-verdict { margin: 9px 0 0; font-size: .75rem; font-weight: 650; }
.sw-pharmacophore-verdict[data-satisfied="true"] { color: #2f8f7f; }
.sw-pharmacophore-verdict[data-satisfied="false"] { color: #b53f41; }

/* Interaction diagram. */
.sw-diagram { max-width: 100%; height: auto; margin-top: 12px; border: 1px solid var(--sw-line, rgba(16, 42, 38, .14)); border-radius: 9px; }
.sw-diagram-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 9px 0 0; padding: 0; list-style: none; font-size: .7rem; }
.sw-diagram-legend li { display: flex; align-items: center; gap: 6px; }
.sw-diagram-legend i { width: 16px; height: 0; border-top: 2px solid var(--sw-edge-colour, #666); }
.sw-diagram-legend span { font-variant-numeric: tabular-nums; opacity: .68; }

/* Backbone torsion table. */
.sw-torsion-table { margin-top: 12px; overflow-x: auto; }
.sw-torsion-table table { width: 100%; border-collapse: collapse; font-size: .7rem; font-variant-numeric: tabular-nums; }
.sw-torsion-table th, .sw-torsion-table td { padding: 4px 7px; text-align: right; border-bottom: 1px solid var(--sw-line, rgba(16, 42, 38, .1)); white-space: nowrap; }
.sw-torsion-table th:first-child, .sw-torsion-table td:first-child, .sw-torsion-table th:last-child, .sw-torsion-table td:last-child { text-align: left; }
.sw-torsion-table th { font-weight: 650; opacity: .75; }

/* Screening hit table extras. */
.sw-screening-note { margin: 8px 0 0; font-size: .68rem; font-style: italic; opacity: .7; }
.sw-screening-detail { margin-top: 8px; font-size: .7rem; }
.sw-screening-detail summary { cursor: pointer; opacity: .78; }
.sw-screening-detail ul { margin: 5px 0 0; padding-left: 18px; opacity: .78; }

/* Tool search: the fastest route through a large tool surface. */

.sw-tool-search { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }

.sw-tool-search-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--sw-line, rgba(16, 42, 38, .2));
  border-radius: 10px;
  background: var(--sw-surface, #0f1514);
  font: inherit;
  font-size: .86rem;
  color: inherit;
}

.sw-tool-search-field input:focus-visible { outline: 2px solid var(--sw-accent, #2f8f7f); outline-offset: 1px; }

.sw-tool-search-results,
.sw-tool-recent { display: flex; flex-direction: column; gap: 5px; }
.sw-tool-search-results[hidden], .sw-tool-recent[hidden] { display: none; }

.sw-tool-recent-label {
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .6;
}

.sw-tool-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--sw-line, rgba(16, 42, 38, .14));
  border-radius: 9px;
  background: var(--sw-surface-raised, rgba(14,25,23,.55));
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sw-tool-result:hover { border-color: var(--sw-accent, #2f8f7f); }
.sw-tool-result > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-tool-result strong { font-size: .82rem; font-weight: 600; }
.sw-tool-result small { font-size: .7rem; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-tool-result em { flex: none; font-style: normal; font-size: .68rem; opacity: .6; }
.sw-tool-search-empty { margin: 0; padding: 12px 4px; font-size: .76rem; opacity: .72; }

@media (max-width: 640px) { .sw-tool-result em { display: none; } }

/* Labels. The summary reads as a short list of what is on screen rather than a
   report, because the result is in the viewport and this only accounts for it. */
.sw-label-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 14px; margin: 12px 0 0; }
.sw-label-summary > div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--sw-line, rgba(16, 42, 38, .1)); font-size: .74rem; }
.sw-label-summary dt { margin: 0; opacity: .74; }
.sw-label-summary dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.sw-label-diagnostics, .sw-label-limitations { margin: 10px 0 0; padding-left: 16px; font-size: .7rem; opacity: .78; }
.sw-label-diagnostics li[data-severity="warning"] { color: #b98b2f; }
.sw-label-limitations { font-style: italic; opacity: .62; }