﻿/* BFB Timeline — CSV load + multi-select comparison */

:root {
  --fg:#344767; --muted:#7b809a; --line:#e9ecef; --bg0:#fff;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --mint:#2dce89;
  --mint-08:rgba(45,206,137,.08); --mint-12:rgba(45,206,137,.12);
  --mint-15:rgba(45,206,137,.15); --mint-45:rgba(45,206,137,.45);
  --up:#2dce89; --down:#f44335; --flat:#7b809a;
  --up-08:rgba(45,206,137,.08); --down-08:rgba(244,67,53,.08);
}
.nav-link-text{font-size:.8125rem}
.sub{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.6}
.status-msg{font-size:14px;margin-top:16px}
.status-msg.error{color:#f44335}
.status-msg.info{color:var(--muted)}
.status-msg.success{color:var(--mint)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tl-section[hidden]{display:none!important}

.medical-banner{font-size:14px;font-weight:700;color:#f44335;background:rgba(244,67,53,.08);
  border:1px solid rgba(244,67,53,.25);border-radius:8px;padding:12px 16px;margin-bottom:18px;
  text-align:center;line-height:1.5}
.warn-note{font-size:13px;color:#8a6d3b;background:rgba(251,189,8,.10);
  border:1px solid rgba(251,189,8,.30);border-radius:8px;padding:10px 14px;margin:0 0 12px;line-height:1.5}
.warn-note[hidden]{display:none!important}

/* Import form */
.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:700px){.import-grid{grid-template-columns:1fr}}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.02em}
.field input[type="text"],.field select,.field textarea{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line);
  background:#f8f9fa;color:var(--fg);font-size:14px;font-family:inherit}
.field input[type="text"]:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--mint-45);box-shadow:0 0 0 3px var(--mint-12)}
.field textarea{min-height:72px;resize:vertical}

.file-drop{display:block;width:100%;box-sizing:border-box;
  border:2px dashed var(--line);border-radius:12px;padding:28px 20px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s}
.file-drop:hover,.file-drop.dragover{border-color:var(--mint);background:var(--mint-08)}
.file-drop input[type=file]{display:none}
.file-drop-label{font-size:15px;color:var(--muted)}
.file-drop-label strong{color:var(--fg)}

/* Session picker */
.pick-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pick-count{font-size:13px;font-weight:600;color:var(--fg);margin-left:auto}
.pick-list{list-style:none;margin:0 0 14px;padding:0;max-height:460px;overflow-y:auto}
.pick-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;cursor:pointer;background:#fff;
  transition:border-color .12s,background .12s}
.pick-item:hover{background:#f8f9fa}
.pick-item.selected{border-color:var(--mint);background:var(--mint-08)}
.pick-item input[type=checkbox]{accent-color:var(--mint);width:16px;height:16px;flex:none}
.pick-seq{font-size:11px;font-weight:700;color:var(--muted);min-width:26px;text-align:right;flex:none}
.pick-info{flex:1;min-width:0}
.pick-when{font-weight:600;font-size:14px;color:var(--fg)}
.pick-label{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-freqs{font-size:12px;color:var(--muted);white-space:nowrap;flex:none}

/* Run progress */
.spinner{display:inline-block;width:22px;height:22px;border:3px solid var(--line);
  border-top-color:var(--fg);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-5px}
@keyframes spin{to{transform:rotate(360deg)}}
.run-status{font-size:14px;color:var(--muted);margin-left:10px}
.run-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:14px}
.run-bar-fill{height:100%;width:0;background:var(--mint);transition:width .25s}

/* Overview chart */
.tl-chart{width:100%;height:190px;display:block;overflow:visible}
.tl-chart .bar{fill:var(--mint);opacity:.85}
.tl-chart .bar.err{fill:#f44335;opacity:.35}
.tl-chart .barval{font-size:11px;font-weight:700;fill:var(--fg)}
.tl-chart .barlbl{font-size:10px;fill:var(--muted)}
.tl-chart .axis{stroke:var(--line);stroke-width:1}
.tl-chart .trend{fill:none;stroke:var(--fg);stroke-width:1.5;stroke-dasharray:4 3;opacity:.6}
.tl-chart .dot{fill:var(--fg);opacity:.6}
.chart-legend{font-size:12px;color:var(--muted);margin-top:8px}
.results-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.results-head-text{flex:1 1 320px;min-width:0}

/* Flow */
.tl-flow{display:flex;flex-direction:column;gap:0}
.tl-card{margin-bottom:0}
.tl-connector{width:2px;height:22px;background:var(--line);margin:0 auto}

/* Collapsible cards */
.card-toggle{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;
  background:transparent;color:inherit;text-align:left;cursor:pointer}
.card-toggle:focus-visible{outline:2px solid var(--mint-45);outline-offset:4px;border-radius:8px}
.card-toggle-main{flex:1 1 auto;min-width:0}
.card-chev{flex:none;color:var(--muted);font-size:24px;transition:transform .18s}
.tl-card.open .card-chev{transform:rotate(180deg)}
.card-detail[hidden]{display:none!important}
.collapsed-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tl-card.open .collapsed-summary{display:none}
.pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;
  border:1px solid var(--line);color:var(--fg);background:#f8f9fa;white-space:nowrap}
.pill.new{border-color:rgba(244,67,53,.35);background:var(--down-08);color:#c0332a}
.pill.cleared{border-color:var(--mint-45);background:var(--up-08);color:#1f9d68}
.pill.err{border-color:rgba(244,67,53,.35);background:var(--down-08);color:#c0332a}
.scan-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.scan-dl-csv{font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;
  border:1px solid var(--line);color:var(--fg);background:#fff;white-space:nowrap;cursor:pointer;
  line-height:1.4}
.scan-dl-csv:hover{border-color:var(--mint);color:var(--mint)}
.scan-dl-csv:disabled{opacity:.55;cursor:default}

/* Scan cards */
.scan-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.scan-seq{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;
  border-radius:8px;background:var(--fg);color:#fff;font-size:12px;font-weight:700;padding:0 8px;flex:none}
.scan-when{font-size:1.05rem;font-weight:700;color:var(--fg)}
.scan-label{font-size:13px;color:var(--muted);word-break:break-word}
.scan-failed{font-size:13px;color:#f44335;font-weight:600}

.stat-row{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 6px}
.stat{flex:1 1 150px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff}
.stat-val{font-size:1.6rem;font-weight:700;color:var(--fg);line-height:1.15}
.stat-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-top:2px}

.top-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:700;margin:18px 0 8px}
.top-list{list-style:none;margin:0;padding:0}
.top-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.top-row:last-child{border-bottom:0}
.top-rank{color:var(--muted);font-size:11px;font-weight:700;min-width:20px}
.top-org{flex:1;min-width:0;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-bar{flex:0 0 120px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.top-bar span{display:block;height:100%;background:var(--mint)}
.top-n{flex:0 0 56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--fg);font-weight:600}
.top-dev{flex:0 0 76px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}

/* Organism drill-down */
.drill{margin-top:14px}
.drill-toggle{background:transparent;border:1px solid var(--line);border-radius:0.375rem;
  padding:6px 12px;font-size:13px;color:var(--fg);cursor:pointer}
.drill-toggle:hover{border-color:var(--mint);color:var(--mint)}
.drill-body{margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:auto;max-height:460px}
.drill-body[hidden]{display:none!important}
table.org-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--fg)}
table.org-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;background:#fff;
  z-index:1;cursor:pointer;white-space:nowrap;user-select:none}
table.org-table th.r,table.org-table td.r{text-align:right}
table.org-table th:hover{color:var(--mint)}
table.org-table th .sort-caret{opacity:.4;font-size:10px;margin-left:3px}
table.org-table td{padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.org-table tr:hover td{background:#f8f9fa}
table.org-table td.org-col{max-width:320px;overflow:hidden;text-overflow:ellipsis}
table.org-table .muted{color:var(--muted)}

/* Delta cards */
.delta-card{border-left:4px solid var(--line)}
.delta-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.delta-icon{color:var(--muted);font-size:20px}
.delta-title{font-size:1rem;font-weight:700;color:var(--fg)}
.delta-span{font-size:12px;color:var(--muted)}
.delta-cols{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}
.delta-col{flex:1 1 320px;min-width:280px;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.delta-col-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:700;margin-bottom:12px}
.delta-figs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.fig{flex:1 1 88px;border-radius:8px;padding:8px 10px;background:#f8f9fa}
.fig-val{font-size:1.25rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.fig-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin-top:2px}
.fig.new .fig-val{color:var(--down)}
.fig.cleared .fig-val{color:var(--up)}
.fig.persist .fig-val{color:var(--fg)}
.chg{font-variant-numeric:tabular-nums;font-weight:700}
.chg.up{color:var(--down)}
.chg.down{color:var(--up)}
.chg.flat{color:var(--flat)}
.chg-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;
  border-bottom:1px solid var(--line)}
.chg-row:last-of-type{border-bottom:0}
.chg-row .chg-lbl{color:var(--muted)}
.org-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips-rest{display:contents}
.chips-rest[hidden]{display:none}
.chip{font-size:12px;padding:3px 9px;border-radius:12px;border:1px solid var(--line);
  color:var(--fg);background:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.new{border-color:rgba(244,67,53,.35);background:var(--down-08)}
.chip.cleared{border-color:var(--mint-45);background:var(--up-08)}
.chip-more{font-size:12px;color:var(--muted);background:transparent;border:0;padding:3px 4px;
  cursor:pointer;text-decoration:underline}
.chip-more:hover{color:var(--mint)}
.delta-empty{font-size:13px;color:var(--muted);font-style:italic}

.load-csv-actions{margin:4px 0 12px}
.load-csv-actions .btn code{font-size:12px;color:inherit;background:transparent;padding:0}
