/* =========================================================================
   Ptarmigan-1 — research workspace design system
   Brand: Talus Bio. Navy identity, paper working surfaces, Sea glass accents.
   Prediction colors are separate from interface status and action colors.
   ========================================================================= */

:root {
  /* Core brand */
  --indigo: #0a0b20;
  --accent: #2d7479;
  --accent-fill: #57999c;
  --action-fill: #367e82;
  --sea: #0086bb;
  --accent-soft: #e9f2f1;
  --slate: #364770;

  /* Neutrals */
  --lavender: #f5f5f2;
  --white: #ffffff;

  /* Warm accents — sparingly, for highlights + data viz */
  --clay: #e5875f;
  --butter: #fbd777;
  --sprout: #d3f2b3;
  --rose: #e39db8;

  /* Surfaces derived from indigo */
  --bg: #f4f4f0;
  --bg-deep: #101426; /* darker well behind the hero field */
  --surface: #ffffff;
  --surface-2: #e8efee;
  --line: #d9dcdf;
  --line-strong: #a3aab6;

  /* Text */
  --ink: #202334;
  --muted: #555e6b;
  --faint: #606a78;

  /* Structure bands are distinct from the teal engagement meter.
     Missing residue predictions have a separate neutral category. */
  --eng-low: #e4e2fa; /* near-white lavender: barely engaged */
  --eng-mod: #64c0ca; /* moderate */
  --eng-unscored: #777777;
  --eng-high: var(--clay); /* hot spot */

  /* Type */
  --font-display: "Host Grotesk", system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, monospace;
  --font-body: "Host Grotesk", system-ui, sans-serif;

  --radius: 6px;
  --radius-lg: 8px;
  --pill: 999px;
}

/* --- Base ---------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Grow with content; long result tables and small screens scroll naturally. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Section labels are the only uppercase UI text. */
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--accent);
}
.mono {
  font-family: var(--font-body);
}

/* Focus visibility — quality floor */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Buttons ------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.94rem;
  text-align: center;
  border: 0;
  border-radius: var(--pill);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.pill--primary {
  background: var(--white);
  color: var(--indigo);
}
.pill--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.pill--accent {
  background: var(--action-fill);
  color: var(--white);
}
.pill--accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(100, 192, 202, 0.35);
}
.pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.pill--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.pill--ghost:hover {
  background: var(--surface);
}
.pill--danger {
  color: #a23434;
}

/* Brand wordmark lockup */
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wordmark svg,
.wordmark img {
  height: 26px;
  width: auto;
  display: block;
}

/* =========================================================================
   LANDING
   ========================================================================= */
.landing {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 100vh;
}

.landing__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  background: var(--indigo);
  position: relative;
  z-index: 1;
}

.landing__hero {
  max-width: 30rem;
  margin: auto 0;
}
.landing__hero h1 {
  font-size: clamp(2.7rem, 5.5vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 1rem 0 1.1rem;
}
.landing__hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.landing__lede {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 26rem;
  margin-bottom: 2.2rem;
}
.landing__more {
  display: flex;
  gap: 1.2rem;
  margin: -1.4rem 0 2.2rem;
}

/* Account creation and sign-in */
.signup-invitation {
  max-width: 22rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.signup-invitation h2,
.signin__heading {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.6rem;
}
.signup-invitation p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1rem;
}
.signup-invitation .pill {
  width: 100%;
}
.signin__heading {
  margin-bottom: 1rem;
}
.signin {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 22rem;
}
.signin label {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: var(--faint);
}
.field {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
}
.field::placeholder {
  color: var(--faint);
}
.field:focus {
  border-color: var(--accent);
  outline: none;
}
.signin .pill {
  margin-top: 0.4rem;
}
.signin__note {
  font-size: 0.8rem;
  color: var(--faint);
}
.signin__note.is-strong {
  color: var(--sprout);
} /* password meets the policy */
.pw-meter__bar {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.pw-meter__fill {
  height: 100%;
  width: 5%;
  border-radius: 999px;
  background: var(--clay);
  transition:
    width 0.15s ease,
    background 0.15s ease;
}
.pw-meter__fill[data-score="0"] {
  width: 15%;
  background: var(--clay);
}
.pw-meter__fill[data-score="1"] {
  width: 35%;
  background: var(--clay);
}
.pw-meter__fill[data-score="2"] {
  width: 60%;
  background: var(--butter);
}
.pw-meter__fill[data-score="3"] {
  width: 85%;
  background: var(--sprout);
}
.pw-meter__fill[data-score="4"] {
  width: 100%;
  background: var(--sprout);
}
.signin__note a {
  color: var(--accent);
}
.signin__consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  max-width: 22rem;
  font-size: 0.8rem;
  color: var(--faint);
}
.signin__consent input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.signin__consent a {
  color: var(--accent);
}
.signin__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
  max-width: 22rem;
}

.landing__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.82rem;
  color: var(--faint);
}
.landing__legal a:hover {
  color: var(--muted);
}

/* The signature: latent-space field */
.landing__stage {
  position: relative;
  background: radial-gradient(120% 120% at 70% 30%, #120a63 0%, var(--bg-deep) 70%);
  overflow: hidden;
}
#latent-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.stage__caption {
  position: absolute;
  left: clamp(1.4rem, 3vw, 2.6rem);
  bottom: clamp(1.4rem, 3vw, 2.6rem);
  max-width: 20rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
  z-index: 2;
}
.stage__caption b {
  color: var(--clay);
  font-weight: 400;
}

/* =========================================================================
   TOPBAR / NAV
   ========================================================================= */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 3vw, 1.8rem);
  border-bottom: 1px solid var(--line);
  background: var(--indigo);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__crumb {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.topbar__crumb b {
  color: var(--ink);
  font-weight: 400;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--pill);
  background: var(--slate);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  height: 100%;
}
.topnav__item {
  position: relative;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.5rem 0.1rem;
  transition: color 0.15s ease;
}
.topnav__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.15s ease;
}
.topnav__item:hover {
  color: var(--ink);
}
.topnav__item.is-active {
  color: var(--ink);
  font-weight: 500;
}
.topnav__item.is-active::after {
  background: var(--accent);
}

/* Mobile nav — hidden above 640px (the breakpoint that hides .topnav);
   below it, this hamburger + dropdown panel is the only way to move
   between Screen/Results/Libraries. */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.mobile-nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--indigo);
  border-bottom: 1px solid var(--line);
  padding: 0.6rem clamp(1rem, 3vw, 1.8rem) 1rem;
  z-index: 10;
}
.mobile-nav.is-open {
  display: flex;
}
.mobile-nav__item {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav__item:last-child {
  border-bottom: 0;
}
.mobile-nav__item.is-active {
  color: var(--accent);
}

/* --- Screen picker --------------------------------------------------------- */
.picker {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  gap: 1.8rem;
}
.picker__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: stretch;
  flex: none;
}
.rail__group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}
.rail__group > label {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: 0.66rem;
  color: var(--faint);
}
.rail__step {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.rail__step .num {
  font-family: var(--font-body);
  color: var(--accent);
  font-size: 0.66rem;
}

select.field {
  appearance: none;
  background-image: none;
  cursor: pointer;
  line-height: 1.4;
}
select.field option {
  color: #111;
}

/* File input — replace the jarring native control */
input[type="file"].field {
  padding: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}
input[type="file"].field::file-selector-button {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  padding: 0.45rem 0.9rem;
  margin-right: 0.8rem;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--ink);
}
input[type="file"].field::file-selector-button:hover {
  background: var(--surface);
}

/* Searchable protein list */
.protein-search {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.protein-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.5rem;
  flex: none;
  height: clamp(240px, 40vh, 600px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* Without this, Chromium leaks this list's full unclipped content
     height into every ancestor's scrollHeight (even though it's
     genuinely clipped here), making the whole document think it has
     thousands of pixels of phantom, unreachable-but-scrollable empty
     space below the real page content. It's also what stops the
     unclipped content from inflating .rail__group's grid-row sizing
     now that this list is flex:1 instead of a fixed max-height. */
  contain: layout;
}

/* Thin custom scrollbar, shared by the app's inner scroll areas. */
.protein-list,
.results-rail {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.protein-list::-webkit-scrollbar,
.results-rail::-webkit-scrollbar {
  width: 8px;
}
.protein-list::-webkit-scrollbar-track,
.results-rail::-webkit-scrollbar-track {
  background: transparent;
}
.protein-list::-webkit-scrollbar-thumb,
.results-rail::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--pill);
}
.protein-list::-webkit-scrollbar-thumb:hover,
.results-rail::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

.protein-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.protein-opt:hover {
  background: var(--surface);
}
.protein-opt.is-active {
  border-color: var(--accent);
  background: var(--surface-2);
}
.protein-opt.is-disabled {
  cursor: default;
  opacity: 0.5;
}
.protein-opt.is-disabled:hover {
  background: none;
}
.protein-opt .gene {
  font-family: var(--font-display);
  font-weight: 600;
}
.protein-opt .acc {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--muted);
}
.protein-opt .fam {
  font-size: 0.8rem;
  color: var(--faint);
}

.protein-selected {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.protein-selected .gene {
  font-weight: 600;
  color: var(--ink);
}
.protein-selected .acc {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.facet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
}
.facet-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  cursor: pointer;
  color: var(--muted);
  background: var(--surface-2);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}
.facet-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.facet-chip:has(input:checked) {
  border-color: var(--turquoise);
  color: var(--ink);
  background: var(--surface);
}
.facet-chip .facet-count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--faint);
}

/* Infinite-scroll sentinel for the protein picker. Invisible: pulled up over
   the last rows (negative margin cancels its own height, so the list ends
   where it always did) and click-through, so htmx's `intersect` trigger fires
   while the user is still a screenful from the bottom rather than at it.

   `flex: none` is load-bearing. `.protein-list` is a column flexbox, and an
   empty flex item shrinks to 0px; a zero-area target at the fractional-pixel
   end of a scroll box never reports as intersecting, so the next page never
   loaded (a plain `height: 1px` measured 0 in Chromium). */
.protein-list-more {
  flex: none;
  height: 160px;
  margin-top: -160px;
  pointer-events: none;
}

.library-opt {
  display: block;
}
.library-opt small {
  color: var(--muted);
}

.upload-hint {
  font-size: 0.8rem;
  color: var(--faint);
}
.upload-hint--warn {
  color: #8b4919;
  margin-top: 0.3rem;
}
.upload-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
}
.upload-step {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--faint);
}
.upload-step:not(:last-child)::after {
  content: "\2192";
  margin-left: 0.5rem;
  font-weight: 400;
  color: var(--line-strong);
}
.upload-step--done {
  color: var(--accent);
}
.upload-step--done::before {
  content: "\2713";
}
.upload-step--current {
  color: var(--ink);
}
.upload-step--current::before {
  content: "\25cf";
  color: var(--accent);
  animation: upload-step-pulse 1.4s ease-in-out infinite;
}
.upload-step--failed {
  color: #a23434;
}
.upload-step--failed::before {
  content: "\2715";
}
@keyframes upload-step-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Screen-page picker copy: no boxes, just prominent text. */
.picker__lead {
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 52rem;
}
.picker__lead b {
  font-weight: 700;
}
.picker__note {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.picker__note a {
  color: var(--accent);
  font-weight: 700;
}
/* Styled through the vendor pseudo-elements rather than replaced with a
   div: <progress> is what a screen reader already announces as a progress
   bar, and the count beside it is the accessible fallback either way. */
.upload-progress {
  width: 100%;
  height: 0.28rem;
  margin: 0.45rem 0 0.3rem;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  appearance: none;
}
.upload-progress::-webkit-progress-bar {
  background: var(--line);
  border-radius: 999px;
}
.upload-progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 999px;
}
.upload-progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: 999px;
}
.rail__cta {
  margin-top: auto;
  flex-shrink: 0;
}
.rail__cta .pill {
  width: 100%;
}

.upload-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.upload-label-row > label {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--faint);
}
.format-help {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.format-help:hover {
  color: var(--ink);
}

/* A small "?" beside a metric label, opening its .help-pop panel. */
.help-btn {
  font: 0.75rem/1 var(--font-body);
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
}
.help-btn:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.format-modal,
.feedback-dialog,
.help-pop {
  width: min(90vw, 480px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  padding: 1.5rem;
  font-family: var(--font-body);
}
/* The metric-help panel is narrower and may need to scroll on a short viewport. */
.help-pop {
  width: min(90vw, 420px);
  max-height: 80vh;
  overflow-y: auto;
}
.help-pop strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 0.6rem;
}
.format-modal::backdrop,
.feedback-dialog::backdrop,
.help-pop::backdrop,
.structure-modal::backdrop,
.admin-library-dialog::backdrop {
  /* One neutral backdrop for every modal, rather than a tint per dialog. */
  background: rgb(0 0 0 / 0.4);
}
.format-modal h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
}
.format-modal h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  margin: 1.1rem 0 0.3rem;
}
.format-modal p,
.help-pop p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 0.4rem;
}
.format-modal__ext {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.format-modal pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--ink);
  overflow-x: auto;
  margin: 0 0 0.4rem;
}
.format-modal code {
  font-family: var(--font-body);
  font-size: 0.85em;
  background: var(--surface);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}
.format-modal .pill,
.help-pop .pill {
  margin-top: 0.8rem;
}

/* --- Main / results ------------------------------------------------------ */
.main {
  flex: 1 0 auto;
  padding: clamp(1.2rem, 2.4vw, 2.2rem);
}
.main--fill {
  display: flex;
  flex-direction: column;
  /* Let short viewports scroll the page instead of squeezing controls over
     the protein list. The list keeps its own bounded scroll area. */
  flex: 1 0 auto;
}

/* Slim page footer, sibling of .topbar/.main — a normal auto-height
   item in body's flex column, so it pins to the viewport bottom on
   short pages and simply follows all content at the bottom of a
   scrolled, taller page. */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 0.6rem 1.4rem;
  padding: 0.9rem clamp(1rem, 3vw, 1.8rem);
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--faint);
}
.footer__links {
  display: flex;
  gap: 1.2rem;
}
.footer__links a:hover {
  color: var(--muted);
}
.footer__contact {
  text-align: center;
}
.footer__contact a:hover {
  color: var(--muted);
}
/* A button, since it opens the popover, styled as its sibling links. */
.footer__feedback {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.footer__feedback:hover {
  color: var(--muted);
}

/* The footer's feedback popover (base.html), which shares .format-modal's
   surface and backdrop above, and its form. */
.feedback-dialog {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.feedback-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.feedback-dialog__head h2 {
  margin: 0;
}
.feedback-form {
  display: grid;
  gap: 0.6rem;
}
.feedback-form textarea {
  resize: vertical;
}
.feedback-form__context {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.feedback-form__consent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.feedback-form__notice {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  background: var(--accent-soft);
}
/* The thank-you after a save; the region stays, each message fades out.
   Centred and click-through: bottom-right, it sat on the footer's Feedback
   button and swallowed the click that should reopen the form. */
.feedback-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 50;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.feedback-toast__text {
  display: block;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 24px #0a0b2026;
  animation: feedback-toast 4s ease forwards;
}
@keyframes feedback-toast {
  0%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-toast__text {
    animation-timing-function: steps(1, end);
  }
}
.feedback-table__page {
  overflow-wrap: anywhere;
}
.feedback-table__message {
  min-width: 18rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.empty {
  /* height:100% used to be inert (.main had no resolved height to
     resolve against) — now that .main is a real flex item with a
     definite computed height, it activates and fights the "Recent
     screens" card below it for space. min-height alone still gives
     the same "mostly-centered" empty state look without that. */
  min-height: 60vh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 1rem;
  color: var(--muted);
}
.empty h2 {
  font-size: 1.8rem;
  color: var(--ink);
}
.empty .eyebrow {
  color: var(--faint);
}
.empty p {
  max-width: 26rem;
}

/* --- Results page: sticky history rail + content ------------------------- */
.results-page {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
.results-rail {
  flex: 0 0 300px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  /* Stays in view as the (often much taller) results/hit list scrolls,
     so switching to a different past screen never requires scrolling
     all the way past a 24-row hit list to find it. */
  position: sticky;
  top: 4.75rem;
  max-height: calc(100vh - 4.75rem - 1.5rem);
  overflow-y: auto;
  /* thin-scrollbar styling is shared with .protein-list, up by that rule */
}
.results-content {
  flex: 1;
  min-width: 0;
}

.results__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.results__head-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.results__head h2 {
  font-size: 1.6rem;
}
.results__head .sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
}
.results__head .sub b {
  color: var(--accent);
  font-weight: 400;
}
.results__timing {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.results__timing .mono {
  color: var(--accent);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.pagination__size {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pagination__size label {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: 0.66rem;
  color: var(--faint);
}
.pagination__size select.field {
  width: auto;
  padding: 0.45rem 2rem 0.45rem 0.8rem;
  font-size: 0.85rem;
}
.pagination__pages {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.pagination__pages .pill {
  padding: 0.5rem 1.1rem;
  font-size: 0.7rem;
}

/* Hit list (grid "table") */
.hits {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hit-row,
.hit-head {
  display: grid;
  grid-template-columns: 2.2rem 64px 1fr 200px 6.5rem;
  align-items: center;
  gap: 1rem;
}
.hit-head {
  padding: 0 1rem 0.4rem;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  color: var(--faint);
}
.hit-head .help-btn {
  margin-left: 0.3rem;
}
.hit-row {
  padding: 0.7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    transform 0.12s ease,
    background 0.15s ease;
}
.hit-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateX(2px);
}
.hit-row.is-selected {
  border-color: var(--accent);
}
.hit-row .rank {
  font-family: var(--font-body);
  color: var(--faint);
  font-size: 0.85rem;
}

.chip {
  width: 64px;
  height: 64px;
  background: var(--lavender);
  border-radius: 4px;
  display: grid;
  place-items: center;
  padding: 4px;
}
.chip svg {
  width: 100%;
  height: 100%;
}

.hit-name {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.hit-name .name {
  font-family: var(--font-display);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.hit-name .smiles {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.residue-tag {
  justify-self: start;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #804323;
  border: 1px solid #d8b8a5;
  border-radius: var(--pill);
  padding: 0.15rem 0.6rem;
}

/* Protein-level engagement meter; distinct from structure bands. */
.meter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.meter__track {
  flex: 1;
  height: 8px;
  border-radius: var(--pill);
  background: var(--surface-2);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: var(--pill);
  background: var(--accent-fill);
}
.meter__val {
  font-family: var(--font-body);
  font-size: 0.82rem;
  min-width: 2.8rem;
  text-align: right;
}

/* Short captions under the results table and the structure viewer — the full
   explanations live in the .help-pop panels. */
.metric-note {
  font-size: 0.8rem;
  color: var(--faint);
  margin-top: 1rem;
}
.card__note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.8rem;
}

/* =========================================================================
   COMPOUND DETAIL
   ========================================================================= */
/* Residue track full width, then the structure beside the
   reference-proteome list; one column on narrow screens. */
.detail-stack {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.detail-pair {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
}
.card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}
.card__eyebrow {
  margin-bottom: 0.3rem;
}

.detail__back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 1rem;
}
.detail__back:hover {
  color: var(--ink);
}

.detail__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.detail__title .chip {
  width: 88px;
  height: 88px;
}
.detail__title h2 {
  font-size: 1.7rem;
}
.detail__title .smiles {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--muted);
  word-break: break-all;
}

/* Mol* viewer host */
.viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  /* White viewing surface, matching Mol*'s renderer background (set in
     molstar-view.js) so there is no seam while the canvas loads. */
  background: #ffffff;
  border: 1px solid var(--line);
}
.viewer canvas {
  border-radius: var(--radius);
}
/* The structure carries no text: Mol*'s hover label is hidden, and the
   residue under the pointer is reported by the residue track instead. */
.viewer .msp-highlight-info {
  display: none !important;
}
/* Mol*'s CDN stylesheet colors its viewport control icons (reset/screenshot/
   settings) a muted tan (`.msp-btn-link-toggle-off`, #9c835f) and their "on"
   state a near-black brown; recolored to the app's own text tokens. Mol*'s
   rules are `!important` at the same specificity and molstar.css loads after
   this file, so it would win a tiebreak — the `.msp-plugin` ancestor (Mol*'s
   root class) is there purely to get one level higher. */
.viewer .msp-plugin .msp-btn-link-toggle-off,
.viewer .msp-plugin .msp-btn-link-toggle-off:focus,
.viewer .msp-plugin .msp-btn-link-toggle-off:active {
  color: var(--faint) !important;
}
.viewer .msp-plugin .msp-btn-link-toggle-off:hover,
.viewer .msp-plugin .msp-btn-link-toggle-on,
.viewer .msp-plugin .msp-btn-link-toggle-on:hover {
  color: var(--ink) !important;
}
.viewer__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-align: center;
  padding: 1rem;
}

/* Residue prediction legend, including missing values. */
.legend {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}
.legend__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.sw-low {
  background: var(--eng-low);
}
.sw-mod {
  background: var(--eng-mod);
}
.sw-high {
  background: var(--eng-high);
}

.legend__marker {
  color: var(--eng-high);
  font-size: 0.7rem;
}

/* Smaller type and padding; the 44px touch-target floor on `.pill` still
   applies, so give it the same width floor and single glyphs stay round. */
.pill.pill--small {
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  min-width: 44px;
}

/* =========================================================================
   RESIDUE TRACK (engagement-track.js)
   ========================================================================= */
.track-card__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.track-card__head h3 {
  margin-bottom: 0.5rem;
}
.track-card__controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.track-card__zoom {
  display: flex;
  gap: 0.3rem;
}
.track {
  position: relative;
  width: 100%;
  user-select: none;
}
body.track-dragging {
  user-select: none;
}
.track__svg {
  display: block;
  cursor: crosshair;
  font-family: var(--font-body);
}
.track__axis text {
  font-size: 10px;
  fill: var(--faint);
}
.track__aa {
  font-family: var(--font-mono);
  fill: var(--ink) !important;
}
.track__band {
  font-size: 10px !important;
}
.track__lane-label {
  font-size: 10px;
  fill: var(--muted);
}
.track__feat-label {
  font-size: 10px;
  pointer-events: none;
}
.track__status {
  font-size: 11px;
  fill: var(--faint);
}
.track__cursor {
  stroke: var(--ink);
  stroke-width: 1;
  fill: var(--ink);
  pointer-events: none;
}
.track__cursor--struct {
  stroke: var(--clay);
  fill: var(--clay);
  stroke-dasharray: 3 2;
}
.track__sel {
  fill: var(--eng-mod);
  opacity: 0.14;
  pointer-events: none;
}
.track__sel-edge {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.5;
  pointer-events: none;
}
.track__brush {
  fill: var(--ink);
  opacity: 0.08;
}
.track__tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
  max-width: 280px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
}
.track__tip-head {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  font-weight: 600;
}
.track__tip-feat {
  margin-top: 0.2rem;
  opacity: 0.85;
}

/* Top-5 other targets */
.targets {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.target-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.target-row .rank {
  font-family: var(--font-body);
  color: var(--faint);
  font-size: 0.8rem;
}
.target-row .gene {
  font-family: var(--font-display);
  font-weight: 600;
}
.target-row .acc {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--muted);
}
.target-row .score {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--accent);
}

.factsheet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.85rem;
}
.factsheet dt {
  color: var(--faint);
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0.06em;
}
.factsheet dd {
  margin: 0;
}

/* --- Loading indicators -------------------------------------------------- */
.htmx-indicator {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* A 3×3 lattice whose cells light in turn: clockwise round the edge, then
   the centre. Inline-sized for a card; decorative, so pair it with text. */
.loading-hint {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.lattice {
  display: inline-grid;
  grid-template-columns: repeat(3, 6px);
  gap: 3px;
  flex: none;
}
.lattice__cell {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent-fill);
  opacity: 0.15;
  transform: scale(0.84);
  animation: lattice-orbit 1.08s ease-in-out infinite;
}
.lattice__cell:nth-child(1) {
  animation-delay: 0ms;
}
.lattice__cell:nth-child(2) {
  animation-delay: 90ms;
}
.lattice__cell:nth-child(3) {
  animation-delay: 180ms;
}
.lattice__cell:nth-child(6) {
  animation-delay: 270ms;
}
.lattice__cell:nth-child(9) {
  animation-delay: 360ms;
}
.lattice__cell:nth-child(8) {
  animation-delay: 450ms;
}
.lattice__cell:nth-child(7) {
  animation-delay: 540ms;
}
.lattice__cell:nth-child(4) {
  animation-delay: 630ms;
}
.lattice__cell:nth-child(5) {
  animation-delay: 720ms;
}
@keyframes lattice-orbit {
  0%,
  100% {
    opacity: 0.15;
    box-shadow: 0 0 0 transparent;
    transform: scale(0.84);
  }
  42% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(87, 153, 156, 0.82);
    transform: scale(1);
  }
}

/* =========================================================================
   LEGAL (Terms / Privacy — standalone reading pages)
   ========================================================================= */
.legal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem clamp(1rem, 3vw, 1.8rem);
  border-bottom: 1px solid var(--line);
}
.legal__body {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 1.8rem) 4rem;
}
.legal__body h1 {
  font-size: 2rem;
  margin: 0.6rem 0 1rem;
}
.legal__body h2 {
  font-size: 1.15rem;
  margin: 2.2rem 0 0.7rem;
}
.legal__body h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.7rem;
}
.legal__body p,
.legal__body li {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 0.9rem;
}
.legal__body ul,
.legal__body ol {
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
}
.legal__body blockquote {
  margin: 0 0 0.9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}
.legal__updated {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--faint) !important;
}

/* Public documentation (/docs, app/docs.py): the legal page's reading column,
   with a sidebar of pages and room for code, tables and screenshots. */
.docs {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 2rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.8rem);
}
.docs__nav {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}
.docs__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 1.5rem;
}
.docs__nav li {
  margin: 0 0 0.35rem;
}
.docs__nav a {
  color: var(--muted);
  text-decoration: none;
}
.docs__nav a:hover,
.docs__nav a[aria-current="page"] {
  color: var(--ink);
}
.docs__nav a[aria-current="page"] {
  font-weight: 600;
}
.docs__body {
  max-width: 46rem;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
/* Links in the text, not buttons (/pricing's calls to action are pills). */
.docs__body a:not(.pill) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.docs__body blockquote {
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.docs__body blockquote p {
  margin: 0;
  color: var(--ink);
}
/* /pricing (app/pricing.py): the docs' reading column, centred, with the
   price in a card. */
.pricing.docs__body {
  margin: 0 auto;
  padding-left: clamp(1rem, 3vw, 1.8rem);
  padding-right: clamp(1rem, 3vw, 1.8rem);
}
.pricing__price {
  margin: 1.2rem 0 2rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.legal__body .pricing__amount {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.pricing__amount .mono {
  font-size: 1.7rem;
  color: var(--accent);
  margin-right: 0.3rem;
}
.legal__body .pricing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
}
/* Copy icon on docs code blocks (static/docs.js wraps each <pre>). */
.code-block {
  position: relative;
}
.code-block pre {
  padding-right: 3rem;
}
.code-copy {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.code-copy:hover,
.code-copy:focus-visible {
  color: var(--ink);
  border-color: var(--line-strong);
}

/* The docs' tabs (partials/docs_header.html): Guides, API reference,
   Pricing. In the dark header bar, so the dark-identity tokens apply. */
.docs-header {
  gap: 1rem;
}
.docs-tabs {
  display: flex;
  gap: 0.3rem;
  margin-right: auto;
  margin-left: clamp(0.5rem, 3vw, 2rem);
}
.docs-tabs a {
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius);
  color: #c9cde0;
  text-decoration: none;
  font-weight: 500;
}
.docs-tabs a:hover {
  color: white;
}
.docs-tabs a[aria-current="page"] {
  color: white;
  background: var(--surface);
}
@media (max-width: 640px) {
  .docs-header {
    flex-wrap: wrap;
  }
  .docs-tabs {
    order: 3;
    width: 100%;
    margin: 0.4rem 0 0;
  }
}

/* Under the guides' sidebar: where feedback goes. */
.docs-feedback {
  margin-top: 2rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
}
.docs-feedback p {
  margin: 0 0 0.3rem;
  color: var(--muted);
}
.docs-feedback a {
  color: var(--accent);
  overflow-wrap: anywhere;
}
.api-reference__noscript {
  padding: 2rem;
}

/* Previous / next at the foot of each docs page, in the sidebar's order. */
.docs__pager {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.docs__body .docs__pager a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 0;
  max-width: 50%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
}
.docs__body .docs__pager a:hover {
  border-color: var(--accent);
}
.docs__body .docs__pager .docs__pager-link--next {
  margin-left: auto;
  text-align: right;
}
.docs__pager-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.docs__pager-title {
  font-weight: 600;
  color: var(--accent);
}
.docs__contents {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.docs__contents ul {
  margin: 0;
}
.docs__contents li {
  margin: 0 0 0.25rem;
}
.legal__body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
}
/* A long inline route or identifier wraps rather than widening the page;
   code blocks scroll instead. */
.legal__body :not(pre) > code {
  overflow-wrap: anywhere;
}
.legal__body pre {
  overflow-x: auto;
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.5;
}
.legal__body pre code {
  font-size: 0.82rem;
  color: var(--ink);
}
.legal__body table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
}
.legal__body th,
.legal__body td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--line);
}
.legal__body td {
  color: var(--muted);
}
.legal__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.4rem 0 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (max-width: 900px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .docs__nav ul {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
  }
  .docs__body {
    padding-top: 1.5rem;
  }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .landing {
    grid-template-columns: 1fr;
  }
  .landing__stage {
    min-height: 42vh;
    order: -1;
  }
  .picker {
    flex: none;
  }
  .picker__columns {
    grid-template-columns: 1fr;
    flex: none;
    min-height: 0;
    align-items: start;
  }
  .rail__group,
  .protein-search {
    flex: none;
  }
  .protein-list {
    flex: none;
    min-height: 0;
    max-height: 240px;
  }
  .hit-row,
  .hit-head {
    grid-template-columns: 1.6rem 52px 1fr 104px;
  }
  .hit-row .meter,
  .hit-head .col-meter {
    display: none;
  }
}

@media (max-width: 640px) {
  .topnav {
    display: none;
  }
  .mobile-nav-toggle {
    display: flex;
  }
}

@media (max-width: 560px) {
  .hit-row,
  .hit-head {
    grid-template-columns: 52px 1fr 84px;
  }
  .hit-row .rank,
  .hit-head .col-rank {
    display: none;
  }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  /* A static mark rather than a flickering one: the centre cell lit. */
  .lattice__cell {
    animation: none !important;
  }
  .lattice__cell:nth-child(5) {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 6px rgba(87, 153, 156, 0.82);
  }
}

/* Workspace composition */
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 1rem;
  background: white;
  color: #202334;
}
.skip-link:focus {
  top: 1rem;
}
h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.035em;
}
.main {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 3.5rem);
}
.main--fill {
  flex: 1 0 auto;
}
.topbar {
  --ink: #f9f9fb;
  --muted: #c6c9d5;
  --line: #343648;
  flex-shrink: 0;
  padding: 1.2rem clamp(1.25rem, 4vw, 3.5rem);
}
.topnav__item,
.mobile-nav__item {
  font-family: var(--font-body);
  font-size: 0.94rem;
  text-transform: none;
  letter-spacing: 0;
}
.topnav__item.is-active::after {
  background: #a8ced0;
}
.mobile-nav__item.is-active {
  color: #a8ced0;
}
.mobile-nav {
  position: static;
  flex-basis: 100%;
  padding: 0.5rem 0 0;
}
.topbar:has(.mobile-nav.is-open) {
  flex-wrap: wrap;
}
.avatar {
  min-width: 32px;
}
.page-heading {
  margin-bottom: 2rem;
}
.page-heading h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  margin: 0.6rem 0 1rem;
}
.page-heading .eyebrow {
  margin-top: 0;
}
.page-heading--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.picker {
  max-width: 1160px;
  gap: 1rem;
}
.picker__lead {
  max-width: 46rem;
  color: var(--muted);
  font-weight: 400;
  font-size: 1.05rem;
}
.picker__columns {
  gap: 2.5rem;
  flex: none;
  margin-top: 1rem;
}
.rail__group {
  border: 0;
  border-top: 1px solid var(--line-strong);
  margin: 0;
  padding: 1rem 0 0;
  min-width: 0;
}
.rail__step {
  padding: 0 1rem 0 0;
  font-size: 1.1rem;
  font-weight: 500;
}
.rail__step .num {
  margin-right: 0.6rem;
  font-size: 0.75rem;
}
.rail__group .picker__note {
  min-height: 1.5rem;
  font-size: 0.87rem;
}
.protein-list {
  flex: none;
  min-height: 0;
  height: clamp(240px, 34vh, 400px);
  max-height: 400px;
  gap: 0;
}
.protein-opt {
  justify-content: flex-start;
  padding: 0.9rem 0.8rem;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  min-height: 74px;
}
.protein-opt.is-active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 var(--accent-fill);
}
.protein-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.protein-opt.is-disabled {
  opacity: 1;
  background: #eaece9;
  color: var(--muted);
}
.choice-radio {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0 0.65rem 0 0;
}
.protein-opt .fam {
  margin-top: 0.25rem;
  font-size: 0.85rem;
}
.rail__cta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.4rem;
  margin-top: 0.6rem;
}
.rail__cta .pill {
  width: auto;
  min-width: 180px;
}
.selection-summary {
  font-size: 0.95rem;
  color: var(--muted);
}
#screen-no-library {
  flex-basis: 100%;
}
.field {
  background: #fff;
}
.field:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field-label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.pill {
  min-height: 44px;
}
.pill--primary:hover,
.pill--accent:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(0.95);
}
.pill--accent:disabled {
  filter: none;
}
.upload-hint a,
.card__note a,
.picker__lead a:not(.pill),
.notice a:not(.pill) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.results-rail {
  flex-basis: 220px;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-right: 1px solid var(--line);
  padding: 0 1.3rem 0 0;
}
.history-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.earlier-screens {
  margin-top: 1.6rem;
}
.earlier-screens__more > summary {
  cursor: pointer;
  padding: 0.8rem 0;
}
.results-rail .hit-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.results-rail .hit-row.is-active .name {
  color: var(--accent);
}
.results-rail .hit-name .smiles {
  white-space: normal;
}
.results__head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}
.results__head .sub {
  font-family: var(--font-body);
  line-height: 1.5;
  font-size: 0.9rem;
}
.results-table-wrap {
  position: relative;
  overflow-x: auto;
  border-block: 1px solid var(--line-strong);
}
.results-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: 0.9rem;
}
.results-table th,
.results-table td {
  text-align: left;
  padding: 1rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.results-table thead th {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  background: var(--bg);
  vertical-align: bottom;
}
.results-table tbody th {
  min-width: 130px;
  max-width: 240px;
  overflow-wrap: anywhere;
  font-weight: 500;
}
.results-table tbody tr:hover {
  background: #e8efee;
}
.results-table .rank {
  color: var(--faint);
}
.results-table .meter {
  min-width: 135px;
}
.results-table .chip {
  width: 90px;
  height: 80px;
  background: #fff;
}
.compound-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.compound-id {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.4rem;
  overflow-wrap: anywhere;
}
.hit-row {
  border-radius: 0;
  border-width: 0 0 1px;
  background: transparent;
}
.hit-row:hover {
  transform: none;
}
.detail__title {
  gap: 1.5rem;
  margin: 1rem 0 2rem;
  align-items: flex-start;
}
.detail__title > div {
  min-width: 0;
}
.detail__title .chip {
  width: 140px;
  height: 120px;
  flex-shrink: 0;
  background: white;
}
.detail__title h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  overflow-wrap: anywhere;
}
.chemical-details {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.chemical-details summary {
  cursor: pointer;
}
.chemical-details code {
  display: block;
  overflow-wrap: anywhere;
  white-space: normal;
  margin: 0.7rem 0;
  max-width: 65ch;
}
.copy-status {
  margin-left: 0.7rem;
}
.factsheet {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.factsheet dt {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
}
.viewer__loading {
  color: #dce0ef;
}
.viewer__loading .mono {
  color: #bac4df !important;
}
.sw-unscored {
  background: var(--eng-unscored);
}
.library-group-title {
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
}
#library-list .library-item + .library-item {
  border-top: 1px solid var(--line);
}
#library-list .hit-row {
  grid-template-columns: 1fr auto;
  padding: 1.2rem 0;
  gap: 1.5rem;
}
/* Not ready yet: nothing to browse, so it shouldn't look clickable. */
#library-list .hit-row:not([data-href]) {
  cursor: default;
}
#library-list .hit-row:not([data-href]):hover {
  background: transparent;
  border-color: var(--line);
}
#library-list .hit-row > span:last-child {
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  max-width: 380px;
}
.library-item-progress {
  padding: 0 0 1.2rem;
}
.library-item-progress .upload-steps {
  margin-top: 0;
}
.status-label {
  color: var(--muted);
  font-size: 0.85rem;
}
.upload-section {
  margin: 3rem 0 0;
  padding: 2rem;
  scroll-margin-top: 7rem;
}
.upload-section h2 {
  margin-bottom: 0.7rem;
}
.upload-label-row {
  margin: 1.5rem 0 0.5rem;
}
.upload-section .upload-hint {
  font-size: 0.9rem;
}
.legal__header {
  /* Dark bar, dark-identity tokens (as .auth-page), so its Back pill reads. */
  --ink: #f5f6fb;
  --surface: #171b34;
  --line: #343a51;
  --line-strong: #606983;
  background: var(--indigo);
  color: white;
}
/* Auth pages use the same typography with a dark identity. */
.auth-page {
  --bg: #0a0b20;
  --ink: #f5f6fb;
  --muted: #bdc3d6;
  --faint: #b0b8cf;
  --accent: #a8ced0;
  --surface: #171b34;
  --surface-2: #303852;
  --line: #343a51;
  --line-strong: #606983;
}
.auth-page .field {
  background: #171b34;
}
.auth-page .field:focus-visible {
  outline-color: #a8ced0;
}
.auth-page .landing__panel {
  padding: clamp(2rem, 5vw, 5rem);
}
.auth-page .landing__hero {
  padding: 3rem 0;
}
.auth-page .landing__hero h1 {
  font-weight: 400;
  line-height: 1.04;
}
.auth-page--entry .landing__hero {
  padding: 2rem 0;
}
.auth-page--entry .landing__hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}
.auth-page .signin label {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.auth-page .signin__note {
  font-size: 0.85rem;
}
.auth-page .landing__stage {
  background: radial-gradient(ellipse at 65% 40%, #1a2546, #0a0b20 75%);
}
.animation-toggle {
  position: absolute;
  right: 2rem;
  top: 2rem;
  background: transparent;
  color: #d3daee;
  border: 1px solid #606983;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}
.help-btn {
  width: 24px;
  height: 24px;
}
@media (max-width: 1100px) {
  .results-page {
    flex-direction: column;
  }
  .results-rail {
    position: static;
    width: 100%;
    flex-basis: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 200px;
  }
  .results-content {
    width: 100%;
  }
}
@media (max-width: 900px) {
  .picker__columns {
    gap: 2rem;
  }
  .protein-list {
    height: 260px;
    max-height: 260px;
  }
  .landing__stage {
    order: 0;
    min-height: 320px;
  }
}
@media (max-width: 640px) {
  .page-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }
  .topbar__crumb {
    display: none;
  }
  .topbar {
    padding: 1rem 1.25rem;
  }
  .results-rail {
    max-height: 180px;
    overflow: auto;
  }
  .rail__cta {
    align-items: stretch;
    flex-direction: column;
  }
  .rail__cta .pill {
    width: 100%;
  }
  .detail__title .chip {
    width: 90px;
    height: 90px;
  }
  .factsheet {
    grid-template-columns: 1fr;
  }
  #library-list .hit-row {
    gap: 0.5rem;
  }
  #library-list .hit-row > span:last-child {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }
  .upload-section {
    padding: 1.2rem;
  }
  .pagination {
    gap: 1rem;
  }
}

.table-scroll-hint {
  display: none;
  font-size: 0.8rem;
  color: var(--muted);
}
@media (max-width: 800px) {
  .table-scroll-hint {
    display: block;
  }
}

/* A visible allowance with optional, accessible explanation. */
.screen-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
.screen-heading > div {
  min-width: 0;
}
.screen-allowance {
  position: relative;
  flex-shrink: 0;
  margin-top: 1.6rem;
  z-index: 2;
}
.screen-allowance summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}
.screen-allowance summary::-webkit-details-marker {
  display: none;
}
.screen-allowance:is(:hover, [open]) summary {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.screen-allowance__count {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.screen-allowance__label {
  font-size: 0.9rem;
  white-space: nowrap;
}
.screen-allowance__hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.7rem;
}
.screen-allowance__panel {
  position: absolute;
  right: 0;
  top: 100%;
  width: min(330px, calc(100vw - 40px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 12px 32px #0a0b2014;
  font-size: 0.85rem;
  line-height: 1.55;
}
.screen-allowance__panel p {
  color: var(--muted);
}
.screen-allowance__panel a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .screen-heading {
    flex-direction: column;
    gap: 1.2rem;
  }
  .screen-allowance {
    margin-top: 0;
  }
  .screen-allowance__panel {
    left: 0;
    right: auto;
  }
}

/* Two-family typography: interface prose in Host Grotesk; data in Fragment Mono. */
button,
input,
select,
textarea {
  font-family: var(--font-body);
}
.mono,
.hit-row .rank,
.protein-opt .acc,
.residue-tag,
.meter__val,
.target-row .rank,
.target-row .acc,
.target-row .score,
.compound-id,
.format-modal pre,
.format-modal code,
.chemical-details code,
.detail__title .smiles,
.hit-name .smiles,
.rail__step .num {
  font-family: var(--font-mono);
}
.results-rail .hit-name .smiles,
#library-list .hit-name .smiles {
  font-family: var(--font-body);
}
.topbar__crumb,
.detail__back,
.stage__caption,
.viewer__loading,
.signin label,
.rail__group > label,
.upload-label-row > label,
.pagination__size label,
.hit-head,
.topnav__item,
.mobile-nav__item,
.factsheet dt,
input[type="file"].field::file-selector-button {
  letter-spacing: 0;
}
.detail__back,
.topbar__crumb,
.footer,
.pagination__size label,
.upload-label-row > label,
input[type="file"].field::file-selector-button,
.format-help {
  font-size: 0.85rem;
}

.detail-context {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.6rem;
}

/* Independent annotation readiness and administrator progress. */
.annotation-notice {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  border: 1px solid #ddc38d;
  border-left: 4px solid #ab7926;
  border-radius: 0.4rem;
  background: #fff9ed;
  color: #4d3b1e;
}
.annotation-notice--ready {
  border-color: #9cbba9;
  border-left-color: #367554;
  background: #f1f8f3;
  color: #245238;
}
.annotation-notice--failed,
.feedback-form__notice--error {
  border-color: #dbb1a8;
  border-left-color: #a74f3b;
  background: #fff3ef;
  color: #713d31;
}
.annotation-admin {
  max-width: 58rem;
  margin: 0 auto;
}
.annotation-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.annotation-metrics > div {
  padding: 1rem;
  background: #f5f5f2;
  border-radius: 0.35rem;
}
.annotation-metrics dt {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.4rem;
}
.annotation-metrics dd {
  margin: 0;
  color: #252c35;
  overflow-wrap: anywhere;
}
.annotation-error {
  padding: 1rem;
  background: #fff3ef;
  color: #713d31;
}
.facet-chip:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .annotation-metrics {
    grid-template-columns: 1fr;
  }
}

/* Dashboard navigation: the entire card is a link. */
.admin-dashboards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}
.admin-dashboard-link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.admin-dashboard-link__title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.admin-dashboard-link__description {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.admin-dashboard-link__action {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--accent);
  border-radius: var(--pill);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}
.admin-dashboard-link:hover {
  border-color: var(--accent);
  box-shadow: 0 3px 12px #0a0b2014;
}
.admin-dashboard-link:hover .admin-dashboard-link__action {
  background: var(--accent);
  color: white;
}
.admin-dashboard-link:focus-visible,
.admin-back-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.admin-back-link:hover {
  text-decoration-thickness: 2px;
}
@media (max-width: 600px) {
  .admin-dashboards {
    grid-template-columns: 1fr;
  }
}

/* Library actions and structure inspection. */
.library-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.library-actions .upload-hint--warn {
  margin-top: 0;
}
#embed-submit {
  margin-top: 1rem;
}
.chip.structure-zoom {
  width: 140px;
  height: 112px;
  background: transparent;
  border: 1px solid transparent;
  cursor: zoom-in;
  padding: 6px;
}
.detail__title .chip.structure-zoom {
  width: 220px;
  height: 164px;
}
.structure-zoom:hover {
  border-color: var(--line-strong);
}
.structure-zoom:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.structure-modal {
  width: min(840px, 92vw);
  max-height: 90vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
  background: white;
  color: var(--ink);
}
.structure-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.structure-modal__head h2 {
  margin: 0;
  overflow-wrap: anywhere;
}
.structure-modal__drawing {
  height: min(65vh, 620px);
  padding: 1rem;
}
.structure-modal__drawing svg {
  width: 100%;
  height: 100%;
}
.target-row--selected {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.target-row--selected .gene {
  color: var(--accent);
}
.target-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 640px) {
  .detail__title .chip.structure-zoom {
    width: 140px;
    height: 120px;
  }
}

/* Library administration: paginated cards with one action menu. */
.admin-libraries {
  max-width: 1248px;
  margin: 0 auto;
}
.admin-libraries__heading,
.admin-library-dialog__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 2rem 0;
}
.admin-libraries__heading h1 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin: 0.5rem 0;
}
.admin-library-tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.admin-library-tabs a {
  padding: 0.85rem 0;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 3px solid transparent;
}
.admin-library-tabs [aria-current] {
  color: var(--ink);
  border-color: var(--accent);
}
.admin-library-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.admin-library-filters input {
  flex: 1;
}
.admin-library-filters select {
  width: auto;
}
.admin-activity__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 3rem 0 1rem;
}
.admin-library-filters + .admin-activity__heading,
[role="alert"] + .admin-activity__heading {
  margin-top: 0;
}
.admin-activity__download {
  position: relative;
  cursor: not-allowed;
}
.admin-activity__download:hover::after,
.admin-activity__download:focus-visible::after {
  content: attr(data-reason);
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 10;
  width: max-content;
  max-width: 22rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.admin-library-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.85rem;
}
.admin-library-card > summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  cursor: pointer;
  list-style: none;
}
.admin-library-card > summary::-webkit-details-marker {
  display: none;
}
.admin-library-card__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-library-card__name > .admin-library-meta {
  display: block;
  margin-top: 0.4rem;
}
.admin-library-meta {
  color: var(--muted);
  font-size: 0.78rem;
}
.admin-library-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 5px;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}
.admin-library-badge--muted {
  background: var(--surface-2);
  color: var(--muted);
}
.admin-library-card__chevron {
  color: var(--muted);
  font-size: 1.4rem;
}
.admin-library-card[open] > summary .admin-library-card__chevron {
  transform: rotate(90deg);
}
.admin-library-card__body {
  border-top: 1px solid var(--line);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.admin-library-card__body p {
  overflow-wrap: anywhere;
}
.admin-library-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1.5rem;
  font-size: 0.85rem;
}
.admin-library-facts dt {
  color: var(--muted);
}
.admin-library-facts dd {
  margin: 0;
}
.admin-library-card__actions {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.admin-library-actions {
  position: relative;
}
.admin-library-actions > summary {
  list-style: none;
  cursor: pointer;
}
.admin-library-actions > summary::-webkit-details-marker {
  display: none;
}
.admin-library-action-menu {
  position: absolute;
  z-index: 5;
  right: 0;
  top: calc(100% + 0.4rem);
  width: 240px;
  padding: 0.4rem;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px #0a0b201a;
  border-radius: 8px;
}
.admin-library-action-menu a,
.admin-library-action-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
}
.admin-library-action-menu a:hover,
.admin-library-action-menu button:hover {
  background: var(--accent-soft);
}
.admin-library-action-menu .admin-library-danger {
  border-top: 1px solid var(--line);
  color: #a23434;
}
.admin-library-dialog {
  width: min(700px, 94vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem;
  color: var(--ink);
  background: white;
}
.admin-library-dialog__heading {
  margin: 0 0 1.5rem;
}
.admin-library-dialog__heading h2 {
  margin: 0;
  overflow-wrap: anywhere;
}
.admin-library-form {
  display: grid;
  gap: 1rem;
}
.admin-library-form label {
  display: grid;
  gap: 0.4rem;
}
.admin-library-form fieldset label {
  display: inline-flex;
  margin: 0.6rem;
  align-items: center;
}
.admin-library-form fieldset {
  border: 1px solid var(--line);
  border-radius: 6px;
}
.admin-advanced summary {
  cursor: pointer;
  padding: 0.6rem 0;
}
.admin-advanced label {
  margin-top: 1rem;
}
.admin-library-tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.admin-library-provenance {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .admin-libraries__heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-library-filters {
    flex-wrap: wrap;
  }
  .admin-library-filters input {
    flex-basis: 100%;
  }
  .admin-library-card > summary {
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 1rem;
  }
  .admin-library-card__name {
    flex-basis: 80%;
  }
  .admin-library-card__body {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .admin-library-tabs {
    gap: 1rem;
  }
}
.tier-admin {
  max-width: 48rem;
  margin: 0 auto;
}
.tier-admin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
}
.tier-admin-card h2 {
  margin: 0 0 1rem;
}
.tier-admin-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.tier-admin-fields label {
  display: grid;
  gap: 0.4rem;
}
@media (max-width: 640px) {
  .tier-admin-fields {
    grid-template-columns: 1fr;
  }
}
.tier-admin-card h2 .admin-library-meta {
  font-size: 0.9rem;
}

/* =========================================================================
   Billing, API keys, screen status
   ========================================================================= */

.account-page {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.balance-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
}
.balance-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}
.balance-tile--primary {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.balance-tile__label {
  font-size: 0.75rem;
  color: var(--muted);
}
.balance-tile__value {
  font-family: var(--font-mono, monospace);
  font-size: 1.6rem;
  margin-top: 0.25rem;
}
.balance-tile__note {
  font-size: 0.75rem;
  color: var(--faint);
  margin-top: 0.2rem;
}
.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table thead th {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  vertical-align: bottom;
}
.data-table .num {
  text-align: right;
  font-family: var(--font-mono, monospace);
}
/* A row's action column: buttons hug the right edge, on one line. */
.data-table .actions,
.results-table .actions {
  text-align: right;
  white-space: nowrap;
}
/* Below .pill's 44px floor so the button doesn't set the row height; 32px
   stays above the 24px minimum target size (WCAG 2.2 AA). */
.data-table .actions .pill,
.results-table .actions .pill {
  min-height: 2rem;
}
.status-chip {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
}
.status-chip--queued,
.status-chip--running,
.status-chip--pending {
  background: #fdf1cc;
}
.status-chip--completed,
.status-chip--paid,
.status-chip--active {
  background: var(--accent-soft);
  color: var(--accent);
}
.status-chip--failed,
.status-chip--expired,
.status-chip--revoked {
  background: #f9e1d6;
  color: #8b4919;
}
.status-chip--off {
  color: var(--muted);
}
/* Admin user page: clear of the keys table above and the audit log below. */
.admin-keys__revoke-all {
  margin: 1rem 0 2rem;
}
.purchase-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
}
.purchase-form .field {
  max-width: 10rem;
  margin: 0;
}
.notice {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-lg);
}
.notice--error {
  border-color: var(--clay);
  background: #fbebe3;
}
.key-reveal {
  font-family: var(--font-mono, monospace);
  background: var(--bg-deep);
  color: var(--white);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-lg);
  overflow-wrap: anywhere;
  user-select: all;
}
/* Masked by ui.js; the value stays in the page for Copy key. */
.key-reveal.is-masked .key-reveal__value {
  display: none;
}
.key-reveal.is-masked::after {
  content: "••••••••••••••••••••••••••••••••";
  letter-spacing: 0.1em;
  user-select: none;
}
.screen-estimate {
  font-size: 0.85rem;
  color: var(--muted);
}
.screen-estimate b {
  color: var(--ink);
}
.screen-estimate--short {
  color: #8b4919;
}
.screen-status {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.screen-status__steps {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
}
.screen-status__steps li {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--faint);
}
.screen-status__steps li.is-current {
  background: var(--accent);
  color: var(--white);
}
.screen-status__steps li.is-done {
  background: var(--accent-soft);
  color: var(--accent);
}
.model-note {
  font-size: 0.82rem;
  color: #8b4919;
}
.download-form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.download-form .field {
  width: auto;
  margin: 0;
  padding-block: 0.35rem;
}

/* --- Admin: configuration ------------------------------------------------- */
.admin-services {
  margin-top: 3rem;
}
.admin-services__table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
}
.admin-services__table th,
.admin-services__table td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--line, #d9dcd6);
  text-align: left;
  vertical-align: top;
}
.admin-services__table .num {
  text-align: right;
  white-space: nowrap;
}
.admin-services__message {
  overflow-wrap: anywhere;
}
.admin-services__public {
  margin-left: 0.4rem;
  font-size: 0.75rem;
  opacity: 0.6;
}
.admin-services__when {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.7;
}
#admin-services-results.htmx-request {
  opacity: 0.5;
}
.admin-config {
  margin-top: 3rem;
}
.admin-config__facts {
  display: grid;
  gap: 0.5rem;
  margin: 1.25rem 0;
  padding: 1rem;
  background: var(--lavender);
  border-radius: var(--radius);
}
.admin-config__facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.admin-config__facts dt {
  min-width: 12rem;
  color: var(--muted);
}
.admin-config__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.admin-config__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}
.admin-config__group {
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 5rem;
}
.admin-config__group h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.admin-config__description {
  margin: 0.25rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.admin-config__fields {
  margin: 0;
}
.admin-config__fields > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line);
}
.admin-config__fields > div:last-child {
  border-bottom: 0;
}
.admin-config__fields dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-weight: 500;
}
.admin-config__env {
  color: var(--faint);
  font-size: 0.75rem;
  font-weight: 400;
}
.admin-config__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.admin-config__value--secret,
.admin-config__value--unset {
  font-family: var(--font-body);
  color: var(--muted);
}
.admin-config__value--id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.admin-config__copy {
  /* Keeps .pill's 44px touch target; wide enough to read as a pill. */
  padding: 0.2rem 1.1rem;
  font-size: 0.8rem;
}
.standardized-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-fill);
  border-radius: var(--pill);
  min-height: 24px;
  padding: 0.3rem 0.6rem;
  margin-top: 0.3rem;
  cursor: pointer;
}
.standardized-tag::after {
  content: " ›";
}
.standardized-tag:hover,
.standardized-tag:focus-visible {
  background: var(--accent);
  color: var(--surface);
}
.standardized-pop__smiles {
  margin: 1rem 0;
}
.standardized-pop__smiles dt {
  font-size: 0.75rem;
  color: var(--muted);
}
.standardized-pop__smiles dd {
  margin: 0.2rem 0 0.8rem;
}
.standardized-pop__smiles code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.help-pop strong {
  overflow-wrap: anywhere;
}
.help-pop p a,
.format-modal p a {
  color: var(--accent);
  text-decoration: underline;
}
.detail-note {
  font-size: 0.85rem;
  color: var(--muted);
}
.detail-note a {
  color: var(--accent);
  text-decoration: underline;
}
.chemical-details__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.75rem;
}
.chemical-details__label + code {
  margin-top: 0.2rem;
}