/* Spxtacular spectrum viewer: site-only rules. Shared base: tacular-site.css. */

/* Status strip under the header: stays visible while the page scrolls. */
.status-bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.status-bar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.status-bar .status { margin: 0; min-width: 0; flex: 1 1 auto; }
#status { min-width: 0; overflow-wrap: anywhere; }
.status[data-state="info"] .spinner, .status[data-state="info"] progress { display: none; }
.status[data-state="info"] { color: var(--text); }

/* Loader */
.input-panel .row .field.grow, .row .field.grow { flex: 1 1 22rem; }
#spectrum-file { max-width: 100%; font: inherit; }
.spectrum-picker { margin-top: var(--space-4); }
.inline-error { margin-top: var(--space-3); }
.example-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2) var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.example-list li { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sample-card { text-align: left; font-weight: 500; }

/* Viewer summary */
.summary-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.summary-id h2 { margin: 0; }
.summary-source { color: var(--text-muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
#spectrum-info:not(.visible) { display: none; }
.export-group select { width: auto; }

/* Processing steps */
.workspace { margin-top: var(--space-4); }
.processing-list { display: flex; flex-direction: column; }
.processing-row { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.processing-row:last-child { border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); }
.process-name { font-weight: 500; }
.processing-row > .help { margin: 0.1rem 0 0 1.6rem; }
.process-params { margin: var(--space-2) 0 0 1.6rem; gap: var(--space-2) var(--space-3); }
.process-params .field { flex: 1 1 7rem; }
.processing-row:not(:has(> .process-name input:checked)) > .process-params { display: none; }
.process-intro { margin-bottom: var(--space-2); }
.result-note { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.result-note:empty, .result-summary:empty { display: none; }
.result-summary { margin: 0; font-weight: 500; }

/* The main spectrum plot sits beside the controls on wide screens and above them on phones. */
.plot-stage { min-width: 0; }
#plot-container { min-height: 420px; }
@media (max-width: 899px) {
  .plot-stage { order: -1; }
  #plot-container { min-height: 340px; }
}
details.about { margin-top: var(--space-4); }
.annotate-panel, .reporter-panel { margin-top: var(--space-4); }
.annotate-panel h2, .reporter-panel h2 { margin-bottom: var(--space-1); }
.checks.iontypes { gap: var(--space-1) var(--space-3); }
.charges-input { width: 7rem; }
#annot-tol, #reporter-tol { width: 7rem; }

/* Fragment table (colours of ion series come from spxtacular's theme) */
#match-table:empty { display: none; }
.frag-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); }
.frag-title h3 { margin: 0; }
#match-table .prec-row { border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.frag-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-small); font-variant-numeric: tabular-nums; background: var(--surface); }
.frag-table th, .frag-table td { padding: 0.3rem 0.7rem; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--border); }
.frag-table tbody tr:last-child td { border-bottom: 0; }
.frag-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-weight: 600; }
.frag-table .pos { width: 2.5em; color: var(--text-muted); }
.frag-table .res { width: 2.5em; color: var(--text); background: var(--surface-2); border-left: 1px solid var(--border); border-right: 1px solid var(--border); font-weight: 600; }
.frag-table td.frag-cell { color: var(--text-muted); }
.frag-table td.frag-cell.empty { color: var(--border-strong); }
.frag-table td.frag-cell.matched { color: var(--text); font-weight: 600; }
.frag-table sup { margin-left: 1px; font-size: 0.72em; }

/* Reporter table */
#reporter-table:empty { display: none; }
.table-actions { margin-top: var(--space-2); }

@media (max-width: 600px) {
  .status-bar .container { flex-wrap: wrap; }
  .processing-row > .help, .process-params { margin-left: 0; }
  .summary-actions { width: 100%; }
}