/* Phenotype profile search (profile-search.js).
 *
 * Page layout, controls, buttons, tables and About boxes use the shared
 * tool-page rules in batch.css; this file adds the mode tabs, the criterion
 * rows and the toolbars. Colours come from the design tokens.
 */

.profile-search [hidden] { display: none !important; }
.profile-search .ps-catalogue { margin: -12px 0 16px; }

/* Mode switch: two text tabs on a rule, the active one underlined. */
.profile-search .ps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--line);
}
.profile-search .ps-tabs button {
  height: auto;
  margin: 0 0 -1px;
  padding: 6px 12px;
  color: var(--ink-soft);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-size: 14px;
  line-height: 1.4;
}
.profile-search .ps-tabs button:hover:not(:disabled) { color: var(--teal-dark); background: none; }
.profile-search .ps-tabs button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--teal);
  font-weight: 600;
}

.profile-search .ps-panel { padding: 12px 0 20px; }
.profile-search .ps-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 8px 0;
}
.profile-search .ps-toolbar .ps-field { flex: 0 1 300px; min-width: 200px; }
.profile-search .ps-toolbar .ps-field:first-child { flex-basis: 420px; }
.profile-search .ps-field { gap: 4px; }
.profile-search .ps-field-label { color: var(--ink); font-size: 13px; font-weight: 600; }
.profile-search .ps-preset-description { margin: 0 0 10px; }
.profile-search .ps-actions { margin-top: 12px; }

/* One criterion per row: measurement, its controls, remove. */
.profile-search .ps-criteria { border-bottom: 1px solid var(--line-soft); }
.profile-search .ps-row {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: end;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.profile-search .ps-row .ps-field-label { font-weight: 400; color: var(--ink-soft); }
.profile-search .ps-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; min-width: 0; }
.profile-search .ps-controls > .ps-field:first-child { flex: 2 1 260px; }
.profile-search .ps-controls > div { flex: 2 1 260px; min-width: 0; }
.profile-search .ps-controls > .ps-field { flex: 1 1 90px; }
.profile-search .ps-controls input[type="number"] { max-width: 130px; }

.profile-search .ps-results h2 { margin-top: 8px; }
.profile-search .ps-results h3 { margin: 16px 0 6px; }
.profile-search .ps-coverage-table td.wrap { min-width: 320px; }
.profile-search .ps-result-tools { margin-top: 14px; }
.profile-search .ps-table td:first-child { white-space: nowrap; }
.profile-search .ps-table td:nth-child(2) { min-width: 180px; max-width: 320px; white-space: normal; }
.profile-search .ps-table td.ps-value { min-width: 180px; white-space: normal; }
.profile-search .ps-catalogue-details { margin-top: 8px; }

@media (max-width: 850px) {
  .profile-search .ps-row { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-search .ps-row > .ps-field { grid-column: 1; }
  .profile-search .ps-controls { grid-column: 1 / -1; grid-row: 2; }
  .profile-search .ps-remove { grid-column: 2; grid-row: 1; }
  .profile-search .ps-toolbar .ps-field,
  .profile-search .ps-toolbar .ps-field:first-child { flex: 1 1 100%; min-width: 0; }
  .profile-search .ps-coverage-table td.wrap { min-width: 220px; }
  .profile-search .ps-table td:nth-child(2) { min-width: 140px; }
}