/* FASTA viewer: site-specific rules. Base styles and tokens live in tacular-site.css. */

/* Residue-class colours (sequence view, legend, composition bars). Light tints
   so the letters stay readable; each class also differs in text colour. */
:root {
  --aa-hydrophobic: #e8eef5; --aa-hydrophobic-fg: #1b1d1f;
  --aa-polar: #e3f1e6;       --aa-polar-fg: #1e5a2e;
  --aa-acidic: #f8e4e2;      --aa-acidic-fg: #9a2019;
  --aa-basic: #dfe9f6;       --aa-basic-fg: #174a78;
  --aa-special: #f6efd9;     --aa-special-fg: #6e4a00;
  --aa-match: #ffd84d;       --aa-match-fg: #1b1d1f;
  --bar-hydrophobic: #7a8794; --bar-polar: #3f8f55; --bar-acidic: #c0463c;
  --bar-basic: #3a78b5;       --bar-special: #b08a2e; --bar-other: #b4b9be;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --aa-hydrophobic: #2a3038; --aa-hydrophobic-fg: #e6e8ea;
    --aa-polar: #1f3325;       --aa-polar-fg: #9fdcaf;
    --aa-acidic: #3d2220;      --aa-acidic-fg: #f4aca5;
    --aa-basic: #1e2f42;       --aa-basic-fg: #a5caef;
    --aa-special: #3a3019;     --aa-special-fg: #e8c77a;
    --aa-match: #c9a400;       --aa-match-fg: #111;
    --bar-hydrophobic: #8f9ba7; --bar-polar: #5fb577; --bar-acidic: #e0736a;
    --bar-basic: #6ea4da;       --bar-special: #d0aa4c; --bar-other: #50565c;
  }
}
:root[data-theme="dark"] {
  --aa-hydrophobic: #2a3038; --aa-hydrophobic-fg: #e6e8ea;
  --aa-polar: #1f3325;       --aa-polar-fg: #9fdcaf;
  --aa-acidic: #3d2220;      --aa-acidic-fg: #f4aca5;
  --aa-basic: #1e2f42;       --aa-basic-fg: #a5caef;
  --aa-special: #3a3019;     --aa-special-fg: #e8c77a;
  --aa-match: #c9a400;       --aa-match-fg: #111;
  --bar-hydrophobic: #8f9ba7; --bar-polar: #5fb577; --bar-acidic: #e0736a;
  --bar-basic: #6ea4da;       --bar-special: #d0aa4c; --bar-other: #50565c;
}

.stack-sm > * + * { margin-top: var(--space-3); }
#status { margin: 0 0 var(--space-3); min-height: 1.5rem; }

/* ---------- open-a-file panel ---------- */
.dropzone { max-width: 60rem; }
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.open-actions { margin: var(--space-3) 0 var(--space-4); }
.samples-heading { font-size: 0.933rem; margin-top: var(--space-2); }
.samples { list-style: none; margin: 0; padding: 0; }
.samples li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--border);
}
.samples li:first-child { border-top: 0; }
.samples .sample-btn { flex: none; }
.samples .help { flex: 1 1 18rem; }

/* File pickers styled as buttons (the input is visually hidden but focusable). */
.file-btn { cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.file-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ---------- app layout ---------- */
.app { margin-bottom: var(--space-4); }
@media (min-width: 900px) {
  .app.split { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
}
.sidebar h2, .detail h2 { font-size: 1rem; }
.sidebar .panel { padding: var(--space-3); }
.sidebar select, .sidebar input[type="search"], .sidebar input[type="text"] { width: 100%; }
.filter-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }

/* File panel */
.file-name { margin: 0 0 var(--space-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); margin: 0; font-size: var(--fs-small); }
.kv dt { color: var(--text-muted); padding: 2px 0; border-bottom: 1px solid var(--border); }
.kv dd { margin: 0; padding: 2px 0; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

/* Entry list */
.match-count { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.protein-list {
  list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.protein-list li + li { border-top: 1px solid var(--border); }
.entry-btn {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 0; padding: var(--space-2) var(--space-3); cursor: pointer;
  border-left: 3px solid transparent;
}
.entry-btn:hover { background: var(--surface-2); }
.protein-list li.active .entry-btn { background: var(--accent-soft); border-left-color: var(--accent); }
.entry-top { display: flex; align-items: baseline; gap: var(--space-2); }
.entry-btn .acc { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-small); color: var(--accent); overflow-wrap: anywhere; }
.entry-btn .len { margin-left: auto; font-size: var(--fs-xsmall); color: var(--text-muted); white-space: nowrap; }
.entry-btn .meta { display: block; font-size: var(--fs-xsmall); color: var(--text-muted); margin-top: 2px; }
.tag {
  display: inline-block; font-family: var(--font-sans); font-size: var(--fs-xsmall); font-weight: 500;
  line-height: 1.3; padding: 0 0.35rem; border-radius: 3px; border: 1px solid var(--border-strong);
  color: var(--text-muted); background: var(--surface-2); white-space: nowrap; vertical-align: middle;
}
.decoy-badge { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }
.hit-badge { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.protein-list + .empty { margin-top: 0; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.pg-info { font-size: var(--fs-small); color: var(--text-muted); }

/* Search button spinner inherits button text colour. */
#searchBtn .spinner { width: 0.8rem; height: 0.8rem; border-color: currentColor; border-top-color: transparent; }

/* Export and decoys */
.tools-panel > summary { font-weight: 600; }
.tools-panel fieldset { padding-top: var(--space-2); }

/* ---------- selected entry ---------- */
.header-card { margin-bottom: var(--space-4); }
.header-card .empty { margin: 0; }
.entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.entry-title { min-width: 0; }
.entry-title h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.entry-title h2 .tag { font-size: var(--fs-xsmall); }
.pname { margin: var(--space-1) 0 0; }
.header-card .stats + .stats, .header-card .stats + .alert { margin-top: var(--space-3); }
.header-card .stats > div { flex-basis: 8rem; }
.header-card .stats > div.wide { flex-basis: 20rem; flex-grow: 3; }
.header-card .stats dd { font-size: 0.933rem; }
.formula { overflow-wrap: anywhere; }
.raw-header {
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); font-size: var(--fs-xsmall);
  background: var(--surface-2); border-radius: var(--radius); color: var(--text-muted); overflow-wrap: anywhere;
}

/* Sequence view */
.sequence-toolbar h3 .muted { font-weight: 400; font-size: var(--fs-small); }
.sequence-toolbar .check { margin-right: var(--space-2); }
.legend { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
.legend-square {
  display: inline-block; width: 1.3em; text-align: center; font-family: var(--font-mono); font-weight: 600;
  border: 1px solid var(--border); border-radius: 3px;
}
.sequence-area {
  overflow-x: auto; padding: var(--space-2) 0; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.933rem;
}
.seq-line { display: flex; width: max-content; margin: 0 auto 0.35rem 0; line-height: 1.6; }
.seq-pos { width: 6ch; flex: none; text-align: right; padding-right: 1ch; color: var(--text-muted); font-size: var(--fs-xsmall); font-variant-numeric: tabular-nums; align-self: center; }
.seq-pos.end { text-align: left; padding: 0 0 0 1ch; }
.aa { display: inline-block; width: 1.25ch; text-align: center; }
.aa.tick { margin-right: 0.9ch; }
.aa.colored.hydrophobic, .legend-square.hydrophobic { background: var(--aa-hydrophobic); color: var(--aa-hydrophobic-fg); }
.aa.colored.polar, .legend-square.polar { background: var(--aa-polar); color: var(--aa-polar-fg); }
.aa.colored.acidic, .legend-square.acidic { background: var(--aa-acidic); color: var(--aa-acidic-fg); }
.aa.colored.basic, .legend-square.basic { background: var(--aa-basic); color: var(--aa-basic-fg); }
.aa.colored.special, .legend-square.special { background: var(--aa-special); color: var(--aa-special-fg); }
.aa.match, .legend-square.match-key { background: var(--aa-match); color: var(--aa-match-fg); font-weight: 700; text-decoration: underline; }

/* Composition */
.composition-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-3); }
@media (min-width: 1000px) { .composition-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.comp-card h3 { font-size: 0.933rem; }
.comp-table .sans { font-family: var(--font-sans); }
.comp-table td.bar-cell { width: 35%; min-width: 3rem; }
.comp-bar { height: 0.7rem; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.comp-bar > div { height: 100%; background: var(--bar-other); }
.comp-bar.hydrophobic > div { background: var(--bar-hydrophobic); }
.comp-bar.polar > div { background: var(--bar-polar); }
.comp-bar.acidic > div { background: var(--bar-acidic); }
.comp-bar.basic > div { background: var(--bar-basic); }
.comp-bar.special > div { background: var(--bar-special); }

/* Parsed fields */
.raw-json { margin: var(--space-2) 0 0; max-height: 36rem; font-size: var(--fs-xsmall); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Methods and URL help below the app */
.after-app { margin-top: var(--space-4); }
.url-help .table-wrap { margin-bottom: var(--space-3); max-width: 40rem; }