/* Biology Asset Browser — v0.1
   Simple, clean, light mode, responsive. No animation, no framework. */

:root {
  --bg: #f6f7f9;
  --panel-bg: #ffffff;
  --border: #e0e3e8;
  --text: #1c2126;
  --text-muted: #5b6472;

  /* Functional accent (buttons, links, active states, focus) — the
     GradePerfect navy wordmark colour. Chosen over the raw brand
     turquoise for anything text-sized or interactive: turquoise
     (#00d6b7) measures only ~1.9:1 contrast against white, well short
     of WCAG AA (4.5:1) for text — navy measures ~11:1. Turquoise is
     still used prominently (logo, decorative accents below) — just
     never for small text or controls that need to meet contrast rules. */
  --accent: #054156;
  --accent-hover: #032b38;

  /* Brand colours, decorative use only — see note above. */
  --brand-teal: #00d6b7;
  --brand-teal-tint: #e6faf6;
  --brand-navy: #054156;

  --badge-bg: #eef2ee;
  --badge-text: #1f6f4a;
  --shadow: 0 1px 2px rgba(20, 24, 28, 0.06), 0 1px 6px rgba(20, 24, 28, 0.04);
  --radius: 8px;
  --max-width: 1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.topbar {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* Same navy-card treatment as the hero logo (see .hero-logo-wrap) —
   the turquoise logo variant on a solid navy card, so the "+" accent
   mark reads clearly here too instead of blending into the header's
   white background. */
.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--brand-navy);
  border-radius: 6px;
  padding: 5px 8px;
}
.brand-logo { height: 28px; width: auto; display: block; }
.brand-title { font-weight: 700; font-size: 1.05rem; color: var(--text); padding-left: 10px; border-left: 1px solid var(--border); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.brand-version {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* -- Persistent search bar (always mounted, in both home and results
   views — critical that this never gets `hidden`/removed while the
   user is actively typing into #search-input; only its own decorative
   branding shrinks in "compact" mode) -- */
.search-bar-persistent {
  text-align: center;
  padding: 56px 12px 32px;
}
.search-bar-persistent.compact {
  padding: 20px 12px 20px;
}
.search-bar-persistent.compact .hero-logo-wrap,
.search-bar-persistent.compact .hero-title,
.search-bar-persistent.compact .hero-subtitle {
  display: none;
}

/* The logo PNGs have a small accent mark (the "+" near the "a") baked in
   as a near-white fill (#fffdfa, fully opaque) — it disappears on a
   light/white card and reads as a stray artifact on the page's light-gray
   background. A solid navy card (--brand-navy) shows the mark clearly as
   a bright highlight, with the turquoise logo variant on top of it for
   strong contrast against the dark background. (Header/footer logos
   already sit on an explicit white background and don't have this
   problem, so they keep the navy variant.) */
.hero-logo-wrap {
  display: inline-block;
  background: var(--brand-navy);
  border-radius: 10px;
  padding: 14px 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.hero-logo { height: 52px; width: auto; margin-bottom: 0; display: block; }
.hero-title {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hero-subtitle {
  margin: 0 auto 28px;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 1rem;
}
.hero-error {
  max-width: 560px;
  margin: -14px auto 20px;
  color: #a3270f;
  font-size: 0.88rem;
}

.hero-search-form { max-width: 640px; margin: 0 auto 16px; }
.hero-search-input {
  width: 100%;
  font-size: 1.1rem;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-bg);
  box-shadow: 0 2px 4px rgba(20, 24, 28, 0.06), 0 4px 16px rgba(20, 24, 28, 0.06);
  color: var(--text);
  text-align: center;
}
.hero-search-input:focus {
  outline: none;
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px var(--brand-teal-tint), 0 4px 16px rgba(20, 24, 28, 0.06);
}
.hero-search-input::placeholder { color: var(--text-muted); }

.search-bar-persistent .filter-bar { justify-content: center; }

/* -- Hero (homepage discovery sections: quick browse / stats / recent) -- */
.hero { padding: 8px 12px 40px; }

.section-heading {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: left;
  margin: 0 0 14px;
}
.section-heading-row { display: flex; align-items: baseline; justify-content: space-between; }

.quick-browse, .stats-section, .recent-section {
  max-width: 980px;
  margin: 0 auto 44px;
  text-align: left;
}

.stats-banner {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
}
.filter-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* -- Quick browse (homepage unit cards) -- */
.quick-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.quick-browse-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  cursor: pointer;
  color: var(--text);
}
.quick-browse-card:hover { border-color: var(--brand-teal); }
.quick-browse-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-browse-card-name { font-weight: 600; font-size: 0.94rem; display: block; margin-bottom: 4px; }
.quick-browse-card-count { color: var(--text-muted); font-size: 0.8rem; }

/* -- Repository statistics cards -- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  text-align: center;
}
.stat-card-value { font-size: 1.6rem; font-weight: 700; color: var(--brand-navy); line-height: 1.1; }
.stat-card-label { color: var(--text-muted); font-size: 0.8rem; margin-top: 6px; }

/* -- Recent additions strip -- */
.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.recent-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #eef0f2;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.recent-thumb img { width: 100%; height: 100%; object-fit: contain; }
.recent-thumb:hover { border-color: var(--brand-teal); }
.recent-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -- Results view (search/browse results, hidden on the homepage) -- */
.results-view { padding-top: 24px; }
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* -- Layout -- */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 780px) {
  .layout { grid-template-columns: 1fr; }
}

.taxonomy-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.taxonomy-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.taxonomy-panel h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0;
}

.taxonomy-tree { font-size: 0.92rem; }
.tx-unit { margin-bottom: 4px; }
.tx-unit-button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 4px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}
.tx-unit-button:hover { background: var(--badge-bg); }
.tx-unit-button[aria-expanded="true"] { color: var(--accent); }
.tx-count { color: var(--text-muted); font-weight: 400; }

.tx-topics { list-style: none; margin: 0 0 6px 0; padding: 0 0 0 12px; }
.tx-topic-button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 5px 4px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
}
.tx-topic-button:hover { background: var(--badge-bg); color: var(--text); }
.tx-topic-button[aria-pressed="true"] {
  background: var(--badge-bg);
  color: var(--accent);
  font-weight: 600;
}

.link-button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  text-decoration: underline;
}

/* -- Results -- */
.results-header {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.card-thumb-wrap {
  background: #eef0f2;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.card-title {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-topic { color: var(--text-muted); font-size: 0.82rem; }

.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
}

.badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-quality-high { background: #eaf6ec; color: #1f6f4a; }
.badge-quality-mid { background: #fdf3e3; color: #a3670f; }

.card-download {
  border: 1px solid var(--border);
  background: var(--panel-bg);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
}
.card-download:hover { border-color: var(--accent); color: var(--accent); }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
}

/* -- Modal -- */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 28, 0.55);
}
.modal-dialog {
  position: relative;
  background: var(--panel-bg);
  border-radius: var(--radius);
  max-width: 920px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}
.modal-close:hover { color: var(--text); }

.modal-body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
}
@media (max-width: 700px) {
  .modal-body { grid-template-columns: 1fr; }
}

.modal-image-wrap {
  background: #eef0f2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.modal-image-wrap img { max-width: 100%; max-height: 60vh; object-fit: contain; }

.modal-details { padding: 24px 24px 24px 20px; }
.modal-details h2 { margin: 0 0 12px; font-size: 1.2rem; }

.detail-list { margin: 0 0 20px; }
.detail-list dt { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 10px; }
.detail-list dd { margin: 2px 0 0; font-size: 0.92rem; }

.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.button {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.button-primary { background: var(--accent); color: #fff; }
.button-primary:hover { background: var(--accent-hover); }
.button-secondary { background: var(--panel-bg); color: var(--text); border-color: var(--border); }
.button-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* -- Footer -- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--panel-bg);
  margin-top: 40px;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-logo-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--brand-navy);
  border-radius: 6px;
  padding: 4px 7px;
}
.footer-logo { height: 20px; width: auto; display: block; }
.footer-brand-text { display: flex; flex-direction: column; font-size: 0.82rem; line-height: 1.3; }
.footer-muted { color: var(--text-muted); }
.footer-meta { color: var(--text-muted); font-size: 0.82rem; flex: 1; min-width: 220px; }
.footer-note { color: var(--text-muted); font-size: 0.78rem; }

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}