/* Shared molecular database browser.
 *
 * Used by every studio that pulls sequences from public databases, so nothing
 * here may depend on a studio's own design tokens: each var() carries a literal
 * fallback, because --pr-* / --mds-* are defined only on .molecular-design-root
 * and the same dialog opens inside Plasmid, Molecular Biology and Protein
 * Engineering Studio too. */

/* --- dialog ---------------------------------------------------------------- */

.mds-db-overlay {
  /* Fixed and body-mounted: see the note in database-browser.js. */
  position: fixed;
  inset: 0;
  /* Above any host studio's own modal layer. Plasmid Studio opens this browser
     from inside its NCBI import dialog (.ps-modal-overlay, z-index 950), so a
     lower value renders the browser behind that dialog and makes it unclickable
     rather than merely ugly. */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 32, 56, 0.42);
  backdrop-filter: blur(2px);
}

.mds-db-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(940px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px 20px 20px;
  border-radius: 10px;
  background: var(--pr-surface, #ffffff);
  border: 1px solid var(--pr-line, #d7dce6);
  box-shadow: 0 18px 48px rgba(20, 40, 80, 0.28);
  color: var(--mds-ink, #1f2733);
}

/* The dialog is a scrolling flex column. Without this, flex children SHRINK to
   fit instead of letting the container scroll — the search row collapses to
   near-zero height and overlaps the source description, swallowing clicks on
   the Search button. */
.mds-db-dialog > * { flex: none; }

.mds-db-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.mds-db-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.mds-db-head p { margin: 4px 0 0; color: var(--mds-muted, #6c7686); font-size: 12.5px; }
.mds-db-close {
  border: 1px solid var(--pr-line, #d7dce6); background: var(--pr-surface, #ffffff); color: var(--mds-muted, #6c7686);
  border-radius: 6px; width: 28px; height: 28px; flex: none; cursor: pointer; font-size: 13px;
}
.mds-db-close:hover { background: var(--pr-hover, #e4ebf7); color: var(--mds-ink, #1f2733); }

.mds-db-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.mds-db-source {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pr-line, #d7dce6); background: var(--pr-surface, #ffffff);
  color: var(--mds-ink, #1f2733); font-size: 12px; font-weight: 600;
}
.mds-db-source:hover { background: var(--pr-hover, #e4ebf7); }
.mds-db-source.active { background: var(--pr-active, #d6e4fb); border-color: var(--pr-blue, #2f6bd4); color: var(--pr-blue-dk, #21508f); }

.mds-db-slow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--mds-amber, #d97706) 16%, white); color: var(--mds-amber, #d97706);
}

.mds-db-sourceinfo {
  padding: 10px 12px; border-radius: 8px;
  background: var(--mds-soft, #f4f6fa); border: 1px solid var(--pr-line, #d7dce6); font-size: 12.5px;
}
.mds-db-sourceinfo p { margin: 0 0 6px; }
.mds-db-sourcemeta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--mds-muted, #6c7686); font-size: 11.5px; }
.mds-db-sourcemeta a { color: var(--pr-blue, #2f6bd4); }

.mds-db-search { display: flex; gap: 8px; }
.mds-db-search .st-input { flex: 1; }

.mds-db-error,
.mds-db-warn,
.mds-db-failures,
.mds-db-busy {
  padding: 8px 11px; border-radius: 7px; font-size: 12.5px;
}
.mds-db-error { background: color-mix(in srgb, #d64545 10%, white); color: #a02b2b; border: 1px solid color-mix(in srgb, #d64545 28%, white); }
.mds-db-warn { margin-top: 6px; background: color-mix(in srgb, var(--mds-amber, #d97706) 12%, white); color: #8a5200; }
.mds-db-failures { background: color-mix(in srgb, var(--mds-amber, #d97706) 10%, white); color: #8a5200; }
.mds-db-busy { background: var(--mds-soft, #f4f6fa); color: var(--mds-muted, #6c7686); }

/* --- results --------------------------------------------------------------- */

.mds-db-hits { display: flex; flex-direction: column; gap: 6px; }
.mds-db-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border-radius: 7px;
  border: 1px solid var(--pr-line, #d7dce6); background: var(--pr-surface, #ffffff); color: var(--mds-ink, #1f2733);
}
.mds-db-hit:hover { background: var(--pr-hover, #e4ebf7); border-color: var(--pr-blue, #2f6bd4); }
.mds-db-hit-title { font-weight: 650; font-size: 13px; line-height: 1.35; }
.mds-db-hit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; color: var(--mds-muted, #6c7686); font-size: 11.5px; }
.mds-db-hit-sub { margin-top: 3px; color: var(--mds-muted, #6c7686); font-size: 11.5px; }
.mds-db-chip {
  padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  background: var(--pr-active, #d6e4fb); color: var(--pr-blue-dk, #21508f);
}

/* --- record detail --------------------------------------------------------- */

.mds-db-record { display: flex; flex-direction: column; gap: 12px; }
.mds-db-record-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.mds-db-record-head h3 { margin: 0; font-size: 14.5px; font-weight: 750; line-height: 1.35; }

.mds-db-seq { border: 1px solid var(--pr-line, #d7dce6); border-radius: 7px; overflow: hidden; }
.mds-db-seq-head {
  padding: 5px 10px; background: var(--mds-soft, #f4f6fa); border-bottom: 1px solid var(--pr-line, #d7dce6);
  color: var(--mds-muted, #6c7686); font-size: 11.5px; font-weight: 650;
}
.mds-db-seq-body {
  display: block; padding: 9px 10px; max-height: 132px; overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  line-height: 1.55; word-break: break-all; color: var(--mds-ink, #1f2733);
}

.mds-db-features { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.mds-db-featlist { display: flex; flex-wrap: wrap; gap: 5px; }
.mds-db-feat {
  padding: 2px 7px; border-radius: 4px; font-size: 11px;
  background: color-mix(in srgb, var(--mds-green, #0f9d76) 12%, white);
  color: #0a6b52; border: 1px solid color-mix(in srgb, var(--mds-green, #0f9d76) 26%, white);
}
.mds-db-more { color: var(--mds-muted, #6c7686); font-size: 11px; }

/* Two columns so a long field list stays scannable; `dd` must be allowed to
   wrap on its own terms — a global word-break here would break accessions
   mid-token, which is exactly the failure the plasmid sidebar hit. */
.mds-db-fields {
  display: grid; grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 4px 14px; margin: 0; font-size: 12.5px;
}
.mds-db-fields dt { color: var(--mds-muted, #6c7686); font-weight: 600; }
.mds-db-fields dd { margin: 0; overflow-wrap: anywhere; }

.mds-db-followups { padding: 10px 12px; border-radius: 8px; background: var(--pr-active, #d6e4fb); font-size: 12.5px; }
.mds-db-followup-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.mds-db-provenance {
  padding: 10px 12px; border-radius: 8px; font-size: 11.5px;
  background: var(--mds-soft, #f4f6fa); border: 1px solid var(--pr-line, #d7dce6); color: var(--mds-muted, #6c7686);
}
.mds-db-provenance strong { display: block; margin-bottom: 4px; color: var(--mds-ink, #1f2733); font-size: 12px; }
.mds-db-provenance a { color: var(--pr-blue, #2f6bd4); }
.mds-db-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

.mds-db-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mds-db-note { color: var(--mds-muted, #6c7686); font-size: 12px; }

/* Compact retrieve-and-cite row for studios that embed the browser beside a
   single sequence field rather than in a workspace header. */
.pes-db-row, .molbio-db-row, .plasmid-db-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px;
}
.pes-db-cite, .molbio-db-cite, .plasmid-db-cite {
  font-size: 11.5px; color: var(--pr-blue-dk, #21508f);
  background: var(--pr-active, #d6e4fb); padding: 2px 8px; border-radius: 4px; font-weight: 600;
}