/* ==========================================================================
   TRACE Harvester — published dataset landing page
   Follows the design language of tickets/css/home.css.
   The .hero-wash background-image is declared in the template because it
   needs the {% static %} tag.
   ========================================================================== */

.fade-in { animation: fadeIn .3s ease-in; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dataset-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Hero ---------- */
.dataset-hero { padding-bottom: 2rem; }

.dataset-hero .hero-block {
  padding-top: clamp(2rem, 7vh, 4rem);
  margin-bottom: 0;
  text-align: left;
}
.dataset-hero .back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 1.1rem;
}
.dataset-hero .back-link:hover { color: var(--trace-blue-dark); }

.dataset-hero h1 {
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.dataset-hero h1 .accent {
  background: linear-gradient(135deg, var(--trace-blue-dark), var(--trace-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dataset-hero .hero-sub {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 1.1rem;
}

/* Metadata chips (non-interactive counterpart of home .chip) */
.meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: var(--text-main);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .84rem;
  font-weight: 500;
}
.meta-chip i { color: var(--trace-blue-dark); font-size: .9rem; }
.meta-chip.chip-accent {
  border-color: rgba(37, 99, 235, .35);
  background: #f5f8ff;
  color: var(--trace-blue-dark);
}

/* ---------- Panels (about-card equivalent) ---------- */
.panel-card {
  border: 1px solid var(--sidebar-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.panel-card .panel-body { padding: 1.4rem 1.6rem; }

.panel-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .8rem;
}

/* ---------- Variables accordion ---------- */
.vars-accordion .accordion-item {
  border: 1px solid var(--sidebar-border);
  border-radius: .75rem !important;
  overflow: hidden;
  margin-bottom: .6rem;
  box-shadow: none;
}
.vars-accordion .accordion-button {
  font-weight: 600;
  font-size: .92rem;
  padding: .8rem 1.05rem;
  background: #fff;
  color: var(--text-main);
  box-shadow: none;
}
.vars-accordion .accordion-button:not(.collapsed) {
  background: #f5f8ff;
  color: var(--trace-blue-dark);
}
.vars-accordion .accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.vars-accordion .accordion-body {
  padding: .6rem 1.05rem 1rem;
  max-height: 420px;
  overflow-y: auto;
}
.vars-count {
  margin-left: auto;
  margin-right: .75rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--trace-blue-dark);
  background: #eef2ff;
  border-radius: 999px;
  padding: .15rem .6rem;
  flex-shrink: 0;
}
.arm-heading {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 1rem 0 .6rem;
}
.instrument-group + .instrument-group { margin-top: .9rem; }
.instrument-name {
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .3rem;
}
.var-list { list-style: none; margin: 0; padding: 0; }
.var-list li {
  padding: .3rem 0;
  border-bottom: 1px solid #f2f4f7;
  font-size: .86rem;
}
.var-list li:last-child { border-bottom: 0; }
.var-list code {
  background: #f8fafc;
  border: 1px solid #eef1f5;
  border-radius: .35rem;
  padding: .05rem .4rem;
  color: var(--trace-blue-dark);
}
.var-choices { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }

/* ---------- Sticky sidebar ---------- */
.dataset-sidebar { position: sticky; top: 1.5rem; }

.btn-trace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  border: 0;
  border-radius: .8rem;
  padding: .6rem 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--trace-blue-dark), var(--trace-blue));
  transition: filter .15s ease;
  text-decoration: none;
}
.btn-trace:hover { color: #fff; filter: brightness(1.1); }

.terms-list { list-style: none; margin: 0; padding: 0; }
.terms-list li {
  display: flex;
  gap: .55rem;
  font-size: .84rem;
  color: var(--text-muted);
  padding: .3rem 0;
}
.terms-list li i {
  color: var(--trace-blue-dark);
  flex-shrink: 0;
  margin-top: .1rem;
}

.contact-name { font-weight: 600; font-size: .92rem; }
.contact-role { font-size: .78rem; color: var(--text-muted); }

/* ---------- Analysis code section ---------- */
.code-chipbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.code-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-main);
}
.code-chip.chip-accent {
  border-color: rgba(37, 99, 235, .35);
  background: #f5f8ff;
  color: var(--trace-blue-dark);
}

.code-frame {
  border: 1px solid var(--sidebar-border);
  border-radius: .75rem;
  overflow: hidden;
}
.code-frame-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #eef1f5;
  font-size: .85rem;
  font-weight: 600;
}
.code-frame pre { margin: 0; padding: 1rem; font-size: .82rem; }

.btn-copy {
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: .5rem;
  font-size: .78rem;
  font-weight: 500;
  padding: .25rem .6rem;
  color: var(--text-main);
  transition: all .15s ease;
}
.btn-copy:hover {
  border-color: var(--trace-blue);
  color: var(--trace-blue-dark);
  background: #f5f8ff;
}

/* Version pills (reuse home chip behavior for links) */
.version-pill {
  border: 1px solid #d0d5dd;
  background: #fff;
  color: var(--text-main);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.version-pill:hover {
  border-color: var(--trace-blue);
  color: var(--trace-blue-dark);
  background: #f5f8ff;
}
.version-pill.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--trace-blue-dark), var(--trace-blue));
  color: #fff;
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .dataset-sidebar { position: static; }
  .dataset-hero .hero-block { padding-top: 1.6rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  .meta-chip, .version-pill, .btn-copy, .btn-trace { transition: none; }
}

/* ---------- Archive file list ---------- */
.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid #f2f4f7;
}
.file-list li:last-child { border-bottom: 0; }
.file-name { font-weight: 600; font-size: .83rem; word-break: break-all; }
.file-meta { font-size: .74rem; color: var(--text-muted); }
.code-scroll { max-height: 420px; overflow: auto; }

.code-frame-foot {
  padding: .55rem 1rem;
  background: #f8fafc;
  border-top: 1px solid #eef1f5;
  font-size: .78rem;
  color: var(--text-muted);
}

/* ---------- Version history table ---------- */
.version-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: .86rem;
}
.version-table thead th {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: #f8fafc;
  border-top: 1px solid var(--sidebar-border);
  border-bottom: 1px solid var(--sidebar-border);
  padding: .55rem 1rem;
  white-space: nowrap;
}
.version-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid #f2f4f7;
  vertical-align: middle;
}
.version-table tbody tr:last-child td { border-bottom: 0; }
.version-table tbody tr:hover td { background: #f8fafc; }
.version-table tbody tr.active-row td { background: #f5f8ff; }
.version-table a {
  text-decoration: none;
  font-weight: 600;
  color: var(--trace-blue-dark);
}
.version-table a:hover { text-decoration: underline; }