/* ==========================================================================
   VIPR Guide Design -- the sequence viewer
   --------------------------------------------------------------------------
   HOW THE ALIGNMENT WORKS, because it is easy to break:

   There is no grid and no table. Every track is one or more lines of the SAME
   number of characters in a monospace font, so column N of each line sits above
   column N of every other. app/core/format.js guarantees the ruler lines are
   exactly as long as the sequence (and is tested for it).

   Two rules keep it working. Both are enforced by tests/static.test.js:

   1. NO horizontal box properties on a token span inside .seq-align. One stray
      padding-left shears every alignment in the tool, silently, and the output
      still looks plausible. The !important guard below exists for that reason.

   2. NO whitespace or newlines between spans inside a .seq-block. The block is
      selectable so a user can drag across it and get clean sequence; a newline
      in the template would paste as a space in the middle of their DNA.
   ========================================================================== */

/* ------------------------------------------------------------------ blocks */

.seq-block {
  font-family: var(--font-mono);
  font-size: var(--seq-size);
  line-height: var(--seq-line);
  color: var(--text-main);
  background: var(--seq-bg);
  border: 1px solid var(--seq-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  /* Ligatures would merge two bases into one glyph. Never. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  -webkit-font-smoothing: antialiased;
  tab-size: 2;
}

/* A flowing sequence: wrapping is fine and desirable. */
.seq-flow {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* A column-aligned track: wrapping would destroy the alignment, so it scrolls. */
.seq-align {
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
}

/* THE GUARD. Do not remove. See the header comment. */
.seq-align span,
.seq-flow span {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  letter-spacing: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
}

/* One line of a multi-line track. */
.seq-line { display: block; min-height: calc(var(--seq-size) * var(--seq-line)); }

/* Row labels live OUTSIDE the scrolling/selectable area so they never end up in
   a copied selection. */
.seq-track { display: flex; align-items: stretch; gap: 0.75rem; }
.seq-gutter {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--seq-size-sm);
  line-height: var(--seq-line);
  color: var(--text-muted-green);
  text-align: right;
  min-width: 5.5rem;
  user-select: none;
  -webkit-user-select: none;
}
.seq-track-body { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ tokens */

.seq-nn   { background: var(--seq-nn-bg);   color: var(--seq-nn-fg);   font-weight: 700; }
.seq-y    { background: var(--seq-y-bg);    color: var(--seq-bb-fg); }
.seq-zz   { background: var(--seq-zz-bg);   color: var(--seq-bb-fg); }
.seq-tail { background: var(--seq-tail-bg); color: var(--seq-tail-fg); }

/* A skipped base is never contacted. Muted with a dotted underline rather than
   a fill: a background here would make the skipped bases visually HEAVIER than
   the contacted ones, which is exactly backwards. */
.seq-skip {
  color: var(--seq-skip-fg);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 2px;
}

.seq-mm      { background: var(--seq-mm-bg); color: var(--seq-mm-fg); font-weight: 700; }
.seq-context { color: var(--seq-context-fg); }
.seq-ruler   { color: var(--seq-ruler-fg); user-select: none; -webkit-user-select: none; }

/* A thin divider between units, drawn with a shadow so it occupies no width.
   Any border/padding here would shear the alignment. */
.seq-unit { box-shadow: inset -1px 0 0 rgba(11, 19, 15, 0.14); }
.seq-unit:last-child { box-shadow: none; }
.seq-flow .seq-unit.is-hover,
.seq-align .seq-unit.is-hover { outline: 2px solid var(--brand-forest-medium); outline-offset: -1px; }

/* ------------------------------------------------------------ select & copy */

/* One click selects the whole sequence, so Ctrl+C always works even when the
   clipboard API is unavailable (file:// pages, older browsers). */
.seq-block[data-copy] { user-select: all; -webkit-user-select: all; cursor: text; }
.seq-block[data-copy] .seq-ruler,
.seq-block[data-copy] .seq-gutter { user-select: none; -webkit-user-select: none; }

/* ------------------------------------------------------------------ legend */

.seq-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; }
.seq-legend-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--text-muted-green);
}
.seq-legend-swatch {
  width: 1.5rem; height: 1rem; border-radius: 3px;
  border: 1px solid rgba(11, 19, 15, 0.1);
  font-family: var(--font-mono); font-size: 0.68rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------- sequence cells in tables */

/* main.css sets `white-space: nowrap` on every .table-custom cell, which is
   right for an admin dashboard and wrong for a 123 nt sequence. Scoped so the
   stock table style elsewhere is untouched. */
.table-custom.table-seq th,
.table-custom.table-seq td { white-space: normal; vertical-align: top; }
.table-custom.table-seq td.mono,
.table-custom.table-seq th.mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.table-custom.table-seq tr.is-hover > td { background: rgba(180, 241, 5, 0.16); }
.table-custom.table-seq td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* A compact inline sequence inside running text or a table cell. */
.seq-inline {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--seq-bg);
  border: 1px solid var(--seq-border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
  word-break: break-all;
}

/* ------------------------------------------------------------- scaffold map */

/* The per-unit scaffold table on the Reference page: fixed-width unit columns. */
.scaffold-table { font-family: var(--font-mono); font-size: 0.78rem; border-collapse: collapse; }
.scaffold-table th, .scaffold-table td {
  border: 1px solid var(--border-light);
  padding: 0.3rem 0.45rem;
  text-align: center;
  white-space: nowrap;
}
.scaffold-table th { background: #F8FAF9; font-weight: 700; }
.scaffold-table td.variant { background: rgba(180, 241, 5, 0.22); font-weight: 700; }
.scaffold-table caption {
  caption-side: bottom; padding-top: 0.6rem;
  font-family: var(--bs-body-font-family); font-size: 0.78rem;
  color: var(--text-muted-green); text-align: left;
}

@media (max-width: 575.98px) {
  :root { --seq-size: 12px; }
  .seq-gutter { min-width: 4rem; font-size: 10.5px; }
}