/* Biophysical Proteome Atlas -- presentation layer.
 *
 * Loaded after bootstrap-custom.css, so it refines rather than replaces it.
 * Nothing here invents a colour: every green is one already used across the app's
 * stylesheets and templates, promoted to a custom property so the shades stay
 * consistent instead of being retyped per page.
 *
 *   --atlas-green-900  #1f321c   darkest, headers and nav
 *   --atlas-green-800  #33532e   the dominant brand green
 *   --atlas-green-600  #518449   mid, links and accents
 *   --atlas-green-400  #75ae6c   Bootstrap's --bs-primary here
 *   --atlas-green-200  #a3c99d   light, borders and badges
 *   --atlas-green-100  #d2e4cf   pale, fills
 *   --atlas-green-050  #f0f6f0   near-white tint, page and card grounds
 */

:root {
  --atlas-green-900: #1f321c;
  --atlas-green-800: #33532e;
  --atlas-green-600: #518449;
  --atlas-green-400: #75ae6c;
  --atlas-green-200: #a3c99d;
  --atlas-green-100: #d2e4cf;
  --atlas-green-050: #f0f6f0;

  --atlas-ink: #1b211a;
  --atlas-ink-muted: #5b6659;
  --atlas-hairline: rgba(31, 50, 28, 0.12);

  /* The navbar is .fixed-top, so it is out of flow and its <header> measures zero.
     Anything at the top of the document sits underneath it unless it accounts for
     this height itself. Templates used to do that ad hoc, with an `mt-5` on the
     sub-header that happened to be near enough; stated once here so the hero and
     the hero-less pages agree.
     From the navbar's box model in bootstrap-custom.css: 1rem of navbar padding-y
     + 0.625rem of .navbar-brand padding-y + a 2rem line box set by the 32px brand
     image. Every consumer adds its own margin on top, so a few pixels of drift
     here shows up as slightly more or less breathing room, never as a collision. */
  --atlas-nav-height: 3.75rem;

  /* The page gutter. Matches the navbar's own inset (container-fluid mx-5), so the
     brand mark, the hero heading and the content all start on the same line. */
  --atlas-gutter: 3rem;

  --atlas-radius: 14px;
  --atlas-radius-sm: 9px;
  /* Deliberately soft and green-tinted rather than neutral grey: a grey shadow
     over a green-tinted ground reads as dirt. */
  --atlas-shadow: 0 1px 2px rgba(31, 50, 28, 0.05),
                  0 8px 24px -12px rgba(31, 50, 28, 0.18);
  --atlas-shadow-lift: 0 2px 4px rgba(31, 50, 28, 0.06),
                       0 16px 32px -14px rgba(31, 50, 28, 0.26);
}

body {
  color: var(--atlas-ink);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* --- Page frame ---------------------------------------------------------- */

/* One gutter for the whole page, so the hero, the navbar and the content cannot
   drift apart. 3rem is what Bootstrap's px-5 gives, which is what the navbar and
   the hero markup already used. */
#main-block,
.atlas-hero > .container-fluid {
  padding-inline: var(--atlas-gutter);
}
#main-block {
  padding-bottom: 4rem;
}

/* Clearing the fixed navbar.
 *
 * With a hero, the gradient runs full-bleed behind the navbar -- one continuous
 * dark band -- so it is the hero's own inner padding that clears it (see
 * .atlas-hero__inner below) and main only needs its normal gap.
 *
 * Without one, main is the navbar's immediate neighbour and has to clear it
 * itself. Selected structurally rather than with a body class, so a new template
 * gets the right spacing without having to remember to opt in: if a section sits
 * between the header and main, that section is the hero. */
.atlas-hero + #main-block {
  padding-top: 2.5rem;
}
body > header + #main-block {
  padding-top: calc(var(--atlas-nav-height) + 1.75rem);
}

/* The current page, marked in the nav.
 *
 * Bootstrap says this with colour (--bs-navbar-active-color, near-black), which cannot
 * work here twice over: the bar is #161a1c, and every link carries .text-white, i.e.
 * `color: #fff !important`, which no colour rule can outrank. So the indicator is an
 * underline and a heavier weight instead -- no !important, and it reads on a dark bar.
 * The rule is inset box-shadow rather than border-bottom so nothing shifts by a pixel. */
header .navbar-nav .nav-link.active {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--atlas-green-400);
}

/* The Organisms dropdown: which proteome you are currently inside.
 *
 * Marked the same way as the nav item above -- the green underline and a heavier
 * weight -- so one visual convention means "here" everywhere in the bar. Bootstrap's
 * own .dropdown-item.active fills the row with --bs-dropdown-link-active-bg and
 * whitens the text, which in this palette is a solid green block: much louder than
 * the underline it would sit two pixels away from, and unreadable against the muted
 * organism names beside it. So the fill is turned off and the rule drawn under the
 * label's own span rather than the full-width row, which would otherwise underline
 * the padding as well as the word.
 *
 * :active is included because Bootstrap styles the pressed state from the same
 * variables -- without it, clicking any item flashes the green block this rule
 * exists to avoid. */
header .navbar .atlas-nav-menu .dropdown-item.active,
header .navbar .atlas-nav-menu .dropdown-item:active {
  background-color: transparent;
  color: var(--atlas-ink);
  font-weight: 600;
}
header .navbar .atlas-nav-menu .dropdown-item.active > span {
  box-shadow: inset 0 -2px 0 var(--atlas-green-400);
}
header .navbar .atlas-nav-menu .dropdown-item:hover,
header .navbar .atlas-nav-menu .dropdown-item:focus {
  background-color: var(--atlas-green-050);
  color: var(--atlas-green-900);
}

/* Below the navbar's own breakpoint the dropdown is not a floating panel: Bootstrap
 * lays it out static, inside the collapsed bar. Left with its card styling it was a
 * white block dropped into the dark bar, brighter than anything else on screen and
 * reading as a different surface rather than a branch of the menu it belongs to.
 *
 * So on small screens it gives up the panel -- no ground, no border, no shadow -- and
 * the items take the bar's own light-on-dark colours, indented to sit under the
 * Organisms row that opened them. 991.98px is Bootstrap's lg breakpoint minus a
 * hairline, i.e. exactly where navbar-expand-lg stops expanding; the two must agree
 * or there is a window where the panel is styled for the wrong layout. */
@media (max-width: 991.98px) {
  header .navbar .atlas-nav-menu {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    padding-block: 0.25rem;
  }
  header .navbar .atlas-nav-menu .dropdown-item,
  header .navbar .atlas-nav-menu .dropdown-item-text {
    color: rgba(255, 255, 255, 0.85);
    padding-left: 2.25rem;
  }
  header .navbar .atlas-nav-menu .dropdown-item.active,
  header .navbar .atlas-nav-menu .dropdown-item:active {
    color: #fff;
  }
  header .navbar .atlas-nav-menu .dropdown-item:hover,
  header .navbar .atlas-nav-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  header .navbar .atlas-nav-menu .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.18);
  }
}

/* The collapsed-nav toggle -- the burger, below the lg breakpoint.
 *
 * Bootstrap draws it as a background-image SVG whose stroke colour is baked into
 * the data URI (--bs-navbar-toggler-icon-bg, rgba(0,0,0,.55)), and the bar is
 * #161a1c: three near-black bars on near-black, effectively invisible. The
 * .text-white on the button and its span cannot reach it, because `color` is not
 * what paints a background image.
 *
 * So the variables are overridden rather than the rules: same SVG, white stroke,
 * and a border to match. Scoped to the atlas header so nothing else on the site
 * that shares this Bootstrap build changes.
 *
 * Not `navbar-dark` or `data-bs-theme="dark"` on the nav, which would fix this one
 * icon and also restyle every dropdown, form control and link inside the bar --
 * the nav links already set their own colours and would then be doing it twice. */
header .navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.35);
}
/* The focus ring is drawn from the same colour, and a near-black glow on a
   near-black bar is no more visible than the icon was. */
header .navbar-toggler:focus {
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) rgba(255, 255, 255, 0.25);
}

@media (max-width: 767.98px) {
  :root {
    --atlas-gutter: 1.25rem;
  }
}

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em;
}

.atlas-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--atlas-green-600);
}

/* The group's own line, above the atlas's name in the hero.
 *
 * NOT .atlas-eyebrow, which is 0.75rem uppercase at 0.09em tracking: right for a
 * two-word kicker ("Bio2Byte - protein biophysics"), wrong for a full sentence, which
 * in all caps at that tracking is a wall to read. Same position and the same quiet
 * green, set in sentence case at a readable size. */
.atlas-hero__tagline {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--atlas-green-200);
  margin-bottom: 0.75rem;
}

.atlas-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--atlas-ink-muted);
  max-width: 68ch;
}

/* Body copy. Line height only -- no measure cap.
 *
 * It used to hold max-width: 74ch, the usual comfortable-reading measure. Every
 * consumer of this class already sits in a column that constrains it -- a grid
 * cell, a card, or the page gutter -- so the cap was a second, invisible
 * constraint on top of a real one, and where the container was wider than 74ch it
 * left the paragraph stopping short of the edge with the text ragged against
 * nothing. The container decides the measure; this decides how it reads. */
.atlas-prose {
  line-height: 1.7;
}

/* Provenance line. Every piece of content taken from another database says where
   it came from and when it was read -- so it needs one consistent, quiet style
   rather than an ad hoc <small> per page. */
.atlas-provenance {
  font-size: 0.8125rem;
  color: var(--atlas-ink-muted);
  /* Grid, not flex-wrap. As a wrapping flex row the dot and the text were two
     flex items, so in a narrow column -- the Downloads card -- the text did not
     fit beside the dot and wrapped underneath it, leaving the dot stranded alone
     on the line above. Two grid columns keep the dot in its own fixed track with
     the text wrapping inside the other, which is what a bullet is. */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: baseline;
}
.atlas-provenance a { color: var(--atlas-green-600); }
.atlas-provenance::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--atlas-green-200);
  /* A grid item now, so no flex sizing. align-self keeps it on the first line's
     text rather than centring it against a paragraph that may run to four. */
  align-self: baseline;
  /* baseline alignment puts a zero-content box on the baseline itself; this lifts
     the dot to sit against the x-height where a bullet belongs. */
  transform: translateY(-0.15rem);
}

/* --- Hero --------------------------------------------------------------- */

.atlas-hero {
  /* The old hero was two flat grey-green blocks stacked. One gradient in the
     brand greens, with the silhouette as a large low-contrast watermark. */
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(163, 201, 157, 0.35) 0%, rgba(163, 201, 157, 0) 55%),
    linear-gradient(152deg, var(--atlas-green-900) 0%, var(--atlas-green-800) 58%, var(--atlas-green-600) 100%);
}

.atlas-hero__inner {
  position: relative;
  z-index: 2;
  /* Top padding clears the fixed navbar and then adds the hero's own breathing
     room; without the first term the breadcrumb sits under the nav bar. */
  padding: calc(var(--atlas-nav-height) + 2rem) 0 3rem;
}

.atlas-hero h1 {
  font-weight: 800;
  line-height: 1.08;
}

.atlas-hero .atlas-eyebrow { color: var(--atlas-green-200); }

.atlas-hero__sub {
  color: rgba(255, 255, 255, 0.82);
  /* max-width: 62ch; */
  line-height: 1.6;
}

/* The italic species name under the organism's common name. */
.atlas-hero__species {
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
}

/* The line under the search box. Quieter than the subtitle, still legible on the
   gradient -- both were inline styles, which put two of this palette's colours
   outside the palette. */
.atlas-hero__note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
}
.atlas-hero__note a { text-decoration: underline; }

.atlas-hero__watermark {
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  height: 118%;
  opacity: 0.14;
  /* White silhouette over the gradient: PhyloPic images are solid black. */
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .atlas-hero__watermark { display: none; }
  .atlas-hero__inner { padding: calc(var(--atlas-nav-height) + 1.25rem) 0 2rem; }
}

.atlas-hero a { color: #fff; }
.atlas-hero .atlas-provenance { color: rgba(255, 255, 255, 0.7); }
.atlas-hero .atlas-provenance a { color: rgba(255, 255, 255, 0.9); }
.atlas-hero .atlas-provenance::before { background: rgba(255, 255, 255, 0.45); }

/* --- Search ------------------------------------------------------------- */

.atlas-search {
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem;
  box-shadow: var(--atlas-shadow-lift);
  display: flex;
  gap: 0.3rem;
  /* Long enough for an accession and a gene name, short of the full column width:
     a pill spanning 900px reads as a banner rather than a control. */
  max-width: 40rem;
}
.atlas-search input.form-control {
  border: 0;
  box-shadow: none;
  padding-left: 1.1rem;
  background: transparent;
}
.atlas-search input.form-control:focus {
  box-shadow: none;
  outline: 0;
}
.atlas-search .btn {
  border-radius: 999px;
  padding-inline: 1.4rem;
  background: var(--atlas-green-800);
  border-color: var(--atlas-green-800);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.atlas-search .btn:hover { background: var(--atlas-green-900); border-color: var(--atlas-green-900); }

/* The page's opening statement, directly above the quick search.
 *
 * Larger than .atlas-lead because it is read once rather than referred back to, and
 * measured to the same optical column as the search box below it -- 62ch at this size
 * lands close to the box's 48rem, so the two read as one centred block. Left-aligned
 * inside that column on purpose: the box is centred, but four sentences of centred
 * prose are markedly harder to read. */
.atlas-intro {
  /* max-width: 62ch; */
  margin-inline: auto;
  margin-bottom: 2rem;
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--atlas-ink);
}

/* --- Quick search -------------------------------------------------------- */

/* The atlas root's "Find your protein atlas entry" box, between the hero and the
   figures. Related to .atlas-search but not the same control: that one filters a
   list already on screen and lives inside an organism's page; this one is a
   destination picker across every proteome, so it carries a label, a hint, and a
   dropdown of matches, and it is centred rather than left-aligned in a column. */
.atlas-quicksearch {
  /* Wider than .atlas-search: these results carry an entry name, a gene and an
     organism on one line, and 40rem truncates them. */
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.atlas-quicksearch__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--atlas-ink-muted);
  margin-bottom: 0.5rem;
}

/* The positioning context for the dropdown, and the pill itself. Same shape as
   .atlas-search so the two read as one family. */
.atlas-quicksearch__control {
  position: relative;
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid var(--atlas-hairline);
  border-radius: 999px;
  box-shadow: var(--atlas-shadow-lift);
  text-align: left;
}
.atlas-quicksearch__control:focus-within {
  border-color: var(--atlas-green-400);
}
.atlas-quicksearch input.form-control {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-left: 1.1rem;
  /* A flex child's min-width is auto, so a long placeholder would push the button
     off the pill rather than being clipped by the input. */
  min-width: 0;
}
.atlas-quicksearch input.form-control:focus { box-shadow: none; outline: 0; }
/* The clear affordance WebKit adds to type=search. Its default position collides
   with the pill's rounded right edge. */
.atlas-quicksearch input[type="search"]::-webkit-search-cancel-button {
  margin-right: 0.35rem;
}
.atlas-quicksearch .btn {
  border-radius: 999px;
  padding-inline: 1.4rem;
  background: var(--atlas-green-800);
  border-color: var(--atlas-green-800);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.atlas-quicksearch .btn:hover { background: var(--atlas-green-900); border-color: var(--atlas-green-900); }

.atlas-quicksearch__hint {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--atlas-ink-muted);
}

/* The suggestion list. Absolute so opening it does not push the figures below it
   down the page, and z-indexed above the cards that follow. */
.atlas-quicksearch__results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--atlas-hairline);
  border-radius: var(--atlas-radius);
  box-shadow: var(--atlas-shadow-lift);
  /* Bounded, because the endpoint's limit is a server-side decision that could be
     raised without anyone thinking about the page height. */
  max-height: 22rem;
  overflow-y: auto;
}
.atlas-quicksearch__result > a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--atlas-radius-sm);
  color: var(--atlas-ink);
  text-decoration: none;
}
/* One rule for both, so keyboard and mouse land on the same appearance rather than
   drifting apart. .is-active is set by the arrow keys; see organism_index.html. */
.atlas-quicksearch__result.is-active > a,
.atlas-quicksearch__result > a:hover,
.atlas-quicksearch__result > a:focus {
  background: var(--atlas-green-050);
  color: var(--atlas-green-900);
}
.atlas-quicksearch__accession {
  display: block;
  font-weight: 700;
  font-family: var(--bs-font-monospace, monospace);
  color: var(--atlas-green-900);
}
.atlas-quicksearch__meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--atlas-ink-muted);
  /* One line per match: the list is for recognising the right entry at a glance,
     and a wrapped row makes the next one harder to scan past. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Cards -------------------------------------------------------------- */

/* No height: 100% here.
 *
 * It was, and it only looks harmless. Bootstrap's .row is a flex container, so a
 * .col-* is a stretched flex item with a definite height -- which means height:100%
 * on a card inside one resolves against the height of the whole column, not the
 * space the card occupies. For a card that is a column's only child those are the
 * same thing, which is why the organism grid looked right. For a card sitting
 * between other blocks -- the "why this link worked before" panel on the not-found
 * page -- the card stretched to the full column and overflowed everything after it,
 * including the footer, which then had text rendering across it.
 *
 * Cards that need to match their neighbours' height ask for it with Bootstrap's
 * h-100, at the one place it is wanted: the organism grid.
 */
.atlas-card {
  background: #fff;
  border: 1px solid var(--atlas-hairline);
  border-radius: var(--atlas-radius);
  box-shadow: var(--atlas-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

/* The whole card is the link to the organism. It used to be the title only, with
   a button beside it going somewhere else entirely -- two targets, one of them
   invisible. */
.atlas-card--link { position: relative; }
.atlas-card--link:hover,
.atlas-card--link:focus-within {
  border-color: var(--atlas-green-200);
  box-shadow: var(--atlas-shadow-lift);
  transform: translateY(-2px);
}
.atlas-card__hitbox {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
.atlas-card__hitbox:focus-visible {
  outline: 3px solid var(--atlas-green-400);
  outline-offset: 2px;
}
/* The find card, on a proteome's own page: the search and that proteome's figures in
 * one block. The search box keeps its own 48rem cap and centring, so this only has to
 * be wide enough not to squeeze it -- 56rem leaves the card's padding either side.
 *
 * Not a fixed height and not a grid: the contents differ by proteome (a proteome with
 * no chromosomes shows a sentence where the others show a select), so it stacks. */
.atlas-card--find {
  max-width: 100rem;
  margin-inline: auto;
}

/* Separates the two halves -- look one thing up, or survey the whole proteome. Inset
   from the card's padding so it reads as a division of the card rather than a border
   across it. */
.atlas-card--find__rule {
  margin: 1.75rem 0 1.5rem;
  border: 0;
  border-top: 1px solid var(--atlas-hairline);
  opacity: 1;
}

/* Browse-everything and jump-to-a-chromosome, side by side: two ways into the same
   list, so neither leads. Aligned on their bottom edges because the jump carries a
   label above its control and the button does not. */
.atlas-card--find__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
/* Takes the slack, so the select is as wide as the row allows rather than as wide as
   its longest chromosome name. Below ~34rem of card the basis wins and the two wrap. */
.atlas-card--find__jump {
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
}
.atlas-card--find__actions > .btn { white-space: nowrap; }

/* The one card in the grid that leaves the atlas. Dashed rather than solid, which
   says "related, not one of these" without needing a heading or a section of its
   own. */
.atlas-card--sibling {
  border-style: dashed;
  background: var(--atlas-green-050);
}

/* Anything that must stay separately clickable sits above the hitbox. */
.atlas-card__above { position: relative; z-index: 2; }

/* A flex child's min-width is auto, so text refuses to shrink below its longest
   word and pushes its siblings out of the box. */
.atlas-card__names {
  min-width: 0;
}

/* The featured star, on the organism grid and again on that organism's own hero.
   Amber rather than the brand green on purpose: it marks a card out from its
   neighbours, which a green among greens would not. Deep enough to stay legible on
   white -- Bootstrap's #ffc107 is around 1.6:1 there and reads washed out at this
   size.

   Sized in em so it tracks whatever it sits beside, from an h5 card title to a
   display-5 heading. */
.atlas-star {
  color: #d18700;
  font-size: 0.8em;
  vertical-align: baseline;
  margin-left: 0.15rem;
}

/* On the hero gradient the relationship inverts: #d18700 is a dark amber on a dark
   green and nearly disappears, so the hero gets the lighter one that white text
   already establishes as the readable end here. Smaller in em too -- 0.8em of a
   display-5 is a 2.4rem star, which competes with the name instead of marking it. */
.atlas-hero .atlas-star {
  color: #ffc94d;
  font-size: 0.5em;
}

.atlas-card__silhouette {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* --- Stats -------------------------------------------------------------- */

/* An auto-fitting grid rather than Bootstrap columns, because the number of stats
   varies: a proteome organised by chromosome shows four, yeast and the plants show
   three. Fixed col-6 columns left the odd one stranded in a half-width row with a
   gap beside it. */
.atlas-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.75rem;
}

/* The atlas root's headline figures, which have a full page width rather than a
   sidebar and read as too small at the sidebar size. */
.atlas-stats--wide {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}
.atlas-stats--wide .atlas-stat { padding: 1.25rem 1.25rem 1rem; }
.atlas-stats--wide .atlas-stat__value { font-size: 2.25rem; }

/* A qualifier under a figure -- which kingdoms the count refers to. */
.atlas-stat__note {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--atlas-ink-muted);
}

.atlas-stat {
  background: var(--atlas-green-050);
  border: 1px solid var(--atlas-hairline);
  border-radius: var(--atlas-radius-sm);
  padding: 0.85rem 1rem;
  height: 100%;
}
.atlas-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--atlas-green-900);
  font-variant-numeric: tabular-nums;
}
.atlas-stat__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--atlas-ink-muted);
  margin: 0;
}

/* --- Reviewed / unreviewed proportion ----------------------------------- */

/* One bar showing how much of a proteome is manually curated. The ratio is the whole
   point of the panel it sits in and it varies enormously between organisms -- yeast
   is entirely reviewed, zebrafish under 5% -- which a pair of numbers states but a
   proportion shows at a glance.

   The unreviewed part is the track itself rather than a second element, so the two
   widths cannot fail to add up. */
.atlas-split {
  height: 0.6rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--atlas-green-100);
  border: 1px solid var(--atlas-hairline);
}
.atlas-split__reviewed {
  display: block;
  height: 100%;
  background: var(--atlas-green-600);
}

.atlas-split__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--atlas-ink-muted);
}
.atlas-split__key {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  margin-right: 0.35rem;
  /* Not colour alone: the labels next to these say which is which in words. */
  border: 1px solid var(--atlas-hairline);
}
.atlas-split__key--reviewed { background: var(--atlas-green-600); }
.atlas-split__key--unreviewed { background: var(--atlas-green-100); }

/* The atlas mark in the hero, as a medallion.
 *
 * The source is a 734px square whose corners are transparent and whose middle 78% is
 * an opaque WHITE disc with the figure on it. Dropped straight onto the gradient that
 * disc reads as a sticker someone stuck on the page -- a hard white circle with
 * nothing relating it to anything around it.
 *
 * So it is given the treatment the ELIXIR mark already gets in the footer: a ring and
 * a soft shadow, which turn the same circle into something deliberate. The glow
 * behind it is a radial gradient in the hero's own light green, so the medallion sits
 * *in* the gradient rather than on top of it.
 */
.atlas-hero__mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 1.25rem;
  /* Sized here rather than left to the image's intrinsic 734px and a max-width on
     the image. An inline-grid track sized from a percentage-width replaced element
     is the one case where the two constraints reference each other; stating the
     wrapper's width settles it. The 240px below plus this padding on both sides. */
  width: 100%;
  max-width: 290px;
}

/* The glow. A pseudo-element rather than a background on the wrapper so it can be
   larger than the image and fade out well past its edge. */
.atlas-hero__mark::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(163, 201, 157, 0.30) 0%,
    rgba(163, 201, 157, 0.10) 45%,
    rgba(163, 201, 157, 0) 70%
  );
}

.atlas-hero__logo {
  position: relative;
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: 50%;
  /* The ring is on the image, not the wrapper: the disc reaches the image's edge, so
     anything further out would float away from it. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 0 10px rgba(255, 255, 255, 0.08),
    0 18px 40px -18px rgba(0, 0, 0, 0.55);
}

@media (max-width: 991.98px) {
  /* Stacked under the text on narrow screens, where a full-size square between the
     heading and the badges is just a long scroll past. */
  .atlas-hero__logo { max-width: 150px; }
  .atlas-hero__mark { padding: 0.75rem; max-width: 174px; }
}

/* --- Hero panel ---------------------------------------------------------- */

/* The predictor list, on the hero gradient rather than on a white card below it.
   Translucent instead of solid so the gradient still reads through -- a white card
   here would look like content that had slipped out of the page body. */
.atlas-hero__panel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--atlas-radius);
  padding: 1.25rem;
}
.atlas-hero__panel .atlas-eyebrow { color: var(--atlas-green-200); }
.atlas-hero__panel .atlas-predictors > div {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.atlas-hero__panel .atlas-predictors dt { color: #fff; }
.atlas-hero__panel .atlas-predictors dd { color: rgba(255, 255, 255, 0.72); }

/* --- Ranked list --------------------------------------------------------- */

/* The most-viewed entries. A numbered list because the order is the content. */
.atlas-rank {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.atlas-rank__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--atlas-hairline);
}
.atlas-rank__item:first-child { border-top: 0; }

.atlas-rank__position {
  flex: 0 0 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--atlas-green-400);
}
.atlas-rank__body { flex: 1 1 auto; min-width: 0; }
.atlas-rank__name {
  font-weight: 600;
  color: var(--atlas-green-800);
  text-decoration: none;
}
.atlas-rank__name:hover { text-decoration: underline; }
.atlas-rank__meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--atlas-ink-muted);
}
.atlas-rank__aside {
  flex: 0 0 auto;
  text-align: right;
  font-size: 0.8125rem;
}
.atlas-rank__views {
  display: block;
  color: var(--atlas-ink-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  /* The aside drops under the name rather than squeezing it to a few characters. */
  .atlas-rank__item { flex-wrap: wrap; }
  .atlas-rank__aside { text-align: left; margin-left: 2.75rem; }
}

/* --- Sections ----------------------------------------------------------- */

.atlas-section { padding-block: 2.75rem; }
/* A section with an id is a jump target (the navbar's "Organisms" link). The navbar is
   .fixed-top and therefore out of flow, so the browser scrolls the target to y=0 and the
   navbar covers it -- the heading lands behind the bar. Reserving its height plus a gap
   puts the heading just below it instead. Only [id] sections pay for this, so a
   scrollIntoView() elsewhere in the app is unaffected. */
.atlas-section[id] { scroll-margin-top: calc(var(--atlas-nav-height) + 1.25rem); }
.atlas-section--tint { background: var(--atlas-green-050); }
.atlas-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--atlas-green-900);
  margin-bottom: 0.35rem;
}

/* A section subtitle -- the qualifier that would otherwise sit in parentheses inside
   the title. Its own line, quieter and smaller, so the heading is the thing being
   described and the source is stated rather than crammed in beside it. */
.atlas-section__sub {
  font-size: 0.875rem;
  color: var(--atlas-ink-muted);
  margin-bottom: 0.9rem;
}

.atlas-divider {
  height: 1px;
  background: var(--atlas-hairline);
  border: 0;
  margin-block: 0;
}

/* --- Definition grid (profile, metadata) -------------------------------- */

.atlas-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem 1.5rem;
  margin: 0;
}
.atlas-facts > div {
  border-top: 1px solid var(--atlas-hairline);
  padding-top: 0.6rem;
  min-width: 0;
}
.atlas-facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--atlas-ink-muted);
  font-weight: 600;
}
.atlas-facts dd {
  margin: 0.15rem 0 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* --- Data table --------------------------------------------------------- */

/* The entry list. One table, two layouts.
 *
 * It used to be Bootstrap's .table .table-striped .table-hover with a .table-primary
 * header row, on a page that also loaded form2.css -- whose bare `table`, `td, th` and
 * `tr:nth-child(even)` rules gave it grey 1px borders, centred cells and grey banding.
 * Nothing else in the atlas looks like that, and on a phone .table-responsive turned
 * nine columns into a sideways scroll where only the first was readable.
 *
 * Wide screens get a plain table: hairline rules, quiet uppercase column labels,
 * tabular numerals where the column is numbers. Below md every row becomes its own
 * card and every cell a label/value pair -- see the media query at the end.
 */
/* No overflow: hidden here, tempting though it is for clipping the table's corners
   to the card's radius: the Downloads menu is absolutely positioned inside a cell and
   a clipped card cuts it off at the last row. */
.atlas-table-card {
  padding: 0.25rem 0.5rem;
}

.atlas-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.atlas-table thead th {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--atlas-hairline);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--atlas-ink-muted);
  white-space: nowrap;
  text-align: left;
}

.atlas-table tbody th,
.atlas-table tbody td {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--atlas-hairline);
  vertical-align: middle;
  font-weight: 400;
  text-align: left;
}
.atlas-table tbody tr:first-child th,
.atlas-table tbody tr:first-child td {
  border-top: 0;
}
.atlas-table tbody tr:hover {
  background: var(--atlas-green-050);
}

/* The link into the entry -- the point of every row, so it is the one thing in it
   that carries weight and colour. */
.atlas-table__accession {
  font-weight: 600;
  color: var(--atlas-green-600);
  text-decoration: none;
}
.atlas-table__accession:hover,
.atlas-table__accession:focus {
  color: var(--atlas-green-900);
  text-decoration: underline;
}

/* Numbers, right-aligned and tabular so digits line up column-wise: a list sorted by
   residue count is read by comparing lengths, which proportional digits fight. */
.atlas-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The only column allowed to wrap. Protein names run long -- "Dihydrofolate reductase"
   is a short one -- and nowrap here is what forced the horizontal scroll. */
.atlas-table__name {
  min-width: 16rem;
}

.atlas-table__sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.atlas-table__sort:hover,
.atlas-table__sort:focus {
  color: var(--atlas-green-600);
}
.atlas-table__sort i {
  margin-left: 0.3rem;
  /* Faint until it means something: an unsorted column shows the icon only so the
     header reads as clickable, and three dark arrows per header row is noise. */
  opacity: 0.35;
  font-size: 0.8em;
}
.atlas-table__sort--on {
  color: var(--atlas-green-900);
}
.atlas-table__sort--on i {
  opacity: 1;
  color: var(--atlas-green-600);
}

/* The per-row actions: the Downloads menu and the REST API link.
 *
 * This column was a row of pills naming file formats -- FASTA, PDB, mmCIF, JSON --
 * plus one reading "on first view", which was not a download. Four to five controls
 * per row, 25 rows to a page: the widest column on the page, and the one carrying the
 * least. Now it is two controls that read as a pair, which is why a <button> and an
 * <a> share one class -- they do the same kind of job and must not look like two
 * different kinds of thing.
 *
 * Deliberately not .btn: Bootstrap's button padding set the row height, which is what
 * made the old pills push the table taller than its content.
 */
.atlas-table__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--atlas-hairline);
  border-radius: 999px;
  background: none;
  font-size: 0.8125rem;
  color: var(--atlas-green-600);
  white-space: nowrap;
}
.atlas-table__action:hover,
.atlas-table__action:focus,
.atlas-table__action[aria-expanded="true"] {
  border-color: var(--atlas-green-200);
  background: var(--atlas-green-050);
  color: var(--atlas-green-900);
}
.atlas-table__action i {
  font-size: 0.75em;
}
/* Text-decoration and colour reset for the anchor half of the pair: without it the
   REST API link is underlined and the button is not. */
.atlas-table__action {
  text-decoration: none;
}
/* One wrapper around both controls -- see the comment in protein_list.html -- which is
   also what sets the gap between them and lets them wrap together in a narrow cell. */
.atlas-table__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.atlas-table__files .dropdown {
  display: inline-block;
}

/* Two lines per item -- what the file holds, then what it is -- so a format name is
   never the whole label. Same shape as .atlas-download on the entry page, at menu
   scale rather than panel scale. */
.atlas-download-menu {
  --bs-dropdown-min-width: 15rem;
  max-width: min(20rem, calc(100vw - 2rem));
  font-size: 0.875rem;
}
.atlas-download-menu .dropdown-item {
  white-space: normal;
  padding-block: 0.4rem;
}
.atlas-download-menu .dropdown-item:hover,
.atlas-download-menu .dropdown-item:focus {
  background: var(--atlas-green-050);
  color: var(--atlas-green-900);
}
.atlas-download-menu .atlas-download__meta {
  font-size: 0.75rem;
  color: var(--atlas-ink-muted);
}

.atlas-table__summary {
  font-size: 0.875rem;
  color: var(--atlas-ink-muted);
  margin-bottom: 0.75rem;
}

/* Below md the table stops being a table.
 *
 * display: block on the parts, so each row is a card and each cell a label/value pair
 * taking its label from data-label -- the header row is the wrong shape for a narrow
 * screen and hiding it is what makes the rest possible. The label column is fixed so
 * the values of every row line up with each other, which is the property a table was
 * providing.
 *
 * 767.98px is Bootstrap's md breakpoint minus a hairline, matching the d-md-none on
 * the Sort by control in the filter card: the headers this hides are where sorting
 * lives, so the two must switch at the same width. */
@media (max-width: 767.98px) {
  .atlas-table-card {
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
  }
  .atlas-table thead {
    /* Not display: none -- that takes the column labels away from a screen reader
       too, and they are what makes the cells make sense. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .atlas-table,
  .atlas-table tbody,
  .atlas-table tr,
  .atlas-table tbody th,
  .atlas-table tbody td {
    display: block;
    width: auto;
  }
  .atlas-table tbody tr {
    border: 1px solid var(--atlas-hairline);
    border-radius: var(--atlas-radius-sm);
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    background: #fff;
  }
  .atlas-table tbody tr:hover {
    background: #fff;
  }
  .atlas-table tbody th,
  .atlas-table tbody td {
    border: 0;
    padding: 0.2rem 0;
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    text-align: left;
  }
  .atlas-table tbody td::before,
  .atlas-table tbody th::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atlas-ink-muted);
  }
  /* The accession is the card's title, so it keeps its label off and spans the row. */
  .atlas-table tbody th[scope="row"] {
    grid-template-columns: 1fr;
    padding-bottom: 0.45rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--atlas-hairline);
    font-size: 1.0625rem;
  }
  .atlas-table tbody th[scope="row"]::before {
    content: none;
  }
  .atlas-table__num {
    text-align: left;
  }
  .atlas-table__name {
    min-width: 0;
  }
}

/* --- Help / guided tour --------------------------------------------------- */

/* Measured column for the tour. This page is the one place prose and screenshots
   alternate for the whole scroll, and a 1280px-wide screenshot under a full-width
   paragraph makes both harder to follow. One shared measure keeps the text and the
   figure it describes the same width, aligned, and readable. */
.atlas-help {
  max-width: 56rem;
}

/* A screenshot of this site, presented as evidence: hairline frame so a white page
   region reads as an image and not as the page itself, and the same radius and
   shadow as a card because visually it is one. */
.atlas-figure {
  margin: 1.25rem 0 0.5rem;
  border: 1px solid var(--atlas-hairline);
  border-radius: var(--atlas-radius-sm);
  box-shadow: var(--atlas-shadow);
  overflow: hidden;
  background: #fff;
}
.atlas-figure img {
  display: block;
  width: 100%;
  /* The width/height attributes reserve the box before the image arrives; this
     keeps the reserved ratio when the column is narrower than the intrinsic size. */
  height: auto;
}
.atlas-figure figcaption {
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--atlas-hairline);
  font-size: 0.8125rem;
  color: var(--atlas-ink-muted);
}

.atlas-help__code {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--atlas-hairline);
  border-radius: var(--atlas-radius-sm);
  background: var(--atlas-green-050);
  font-size: 0.875rem;
  overflow-x: auto;
}

/* --- Predictor list ----------------------------------------------------- */

/* The what-is-predicted list, shared by the atlas index and every organism page so
   the same content is not styled two different ways. Was a flex row with a hand-set
   dt width on one page and space-between on the other. */
.atlas-predictors {
  margin: 0;
}
.atlas-predictors > div {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) 1fr;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--atlas-hairline);
}
.atlas-predictors > div:first-child { border-top: 0; }
.atlas-predictors dt {
  font-weight: 600;
  color: var(--atlas-green-900);
}
.atlas-predictors dd {
  margin: 0;
  color: var(--atlas-ink-muted);
}

/* --- Sequence block ------------------------------------------------------ */

/* FASTA, already wrapped at 60 columns server-side. The pre keeps that wrapping
   rather than re-flowing it, and scrolls if the viewport is narrower than 60
   monospace characters -- so the residue columns still line up on a phone instead of
   being rewrapped to an arbitrary width. */
.atlas-sequence {
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-x: auto;
  margin: 0;
}

/* --- Download list ------------------------------------------------------ */

/* The entry page's "Files" card was four unlabelled buttons. These rows say what
   each file is, what format it is in and where it came from. */
.atlas-download {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.25rem;
  border-top: 1px solid var(--atlas-hairline);
  text-decoration: none;
  color: inherit;
}
/* Explicit rather than :first-of-type / :first-child. The rows are a mix of <a> and
   <button>, and some sit inside a wrapper that JS fills in, so both of those
   pseudo-classes match more than one row here -- :first-of-type once per element
   type, :first-child once per wrapper. */
.atlas-download--first { border-top: 0; }
.atlas-download:hover { background: var(--atlas-green-050); }
.atlas-download__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--atlas-green-100);
  color: var(--atlas-green-900);
  flex: 0 0 auto;
}
.atlas-download__name { font-weight: 600; line-height: 1.25; }
.atlas-download__meta {
  font-size: 0.8125rem;
  color: var(--atlas-ink-muted);
  line-height: 1.35;
}
.atlas-download__action { margin-left: auto; flex: 0 0 auto; }
.atlas-download--absent { opacity: 0.62; }

/* --- Footer -------------------------------------------------------------- */

/* Dark ground, matching the navbar, so the page is bracketed by the same colour top
   and bottom. #161a1c is the value the previous footer carried inline. */
.atlas-footer {
  background: #161a1c;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
}
.atlas-footer a {
  color: #fff;
  text-decoration: none;
}
.atlas-footer a:hover { text-decoration: underline; }

/* ELIXIR Belgium's own orange, not a brand colour of ours to adjust. */
.atlas-footer__elixir {
  background: rgb(244, 125, 32);
  color: #fff;
  padding: 1.25rem 0;
}
.atlas-footer__elixir a { text-decoration: underline; }
.atlas-footer__elixir-title {
  font-weight: 700;
  font-size: 1rem;
}
/* The white roundel the logo sits in: the mark is dark and unreadable directly on
   the orange. */
.atlas-footer__elixir-mark {
  background: #fff;
  border-radius: 50%;
  width: 96px;
  height: 96px;
  padding: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.atlas-footer__elixir-mark img { max-width: 100%; height: auto; }

.atlas-footer__body { padding-block: 2.5rem 1.5rem; }

.atlas-footer__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--atlas-green-200);
  margin-bottom: 0.75rem;
}

.atlas-footer__lead {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.75rem;
}

.atlas-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.atlas-footer__list li { margin-bottom: 0.4rem; }
.atlas-footer__meta {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.atlas-footer__rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-block: 1.5rem 1rem;
}

.atlas-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  padding-bottom: 0.5rem;
}
.atlas-footer__legal a { color: rgba(255, 255, 255, 0.85); }

/* --- Badges, tables, breadcrumb ---------------------------------------- */

.atlas-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--atlas-green-100);
  color: var(--atlas-green-900);
  border: 1px solid var(--atlas-green-200);
}
.atlas-badge--quiet {
  background: transparent;
  color: var(--atlas-ink-muted);
  border-color: var(--atlas-hairline);
}

/* The badges are used both on white cards and on the dark hero, where the palette
   above inverts: --atlas-ink-muted on the gradient is dark grey-green on dark green,
   which is unreadable. Same trap as the breadcrumb, so the same treatment -- and
   --quiet stays after the base rule here so it still wins for quiet badges. */
.atlas-hero .atlas-badge {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.atlas-hero .atlas-badge--quiet {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.26);
}

.breadcrumb {
  --bs-breadcrumb-divider: "/";
  font-size: 0.875rem;
  margin-bottom: 1.1rem;
}
.breadcrumb a { color: var(--atlas-green-600); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--atlas-ink-muted); }

/* On the hero, the same breadcrumb sits on the dark gradient.
   These need the extra class in the selector to beat `.breadcrumb a` above: the
   generic `.atlas-hero a` rule has the same specificity but comes earlier in the
   file, so it lost, and the crumbs rendered mid-green on dark green -- around 1.5:1
   contrast, effectively invisible. */
.atlas-hero .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.45);
}
.atlas-hero .breadcrumb a { color: rgba(255, 255, 255, 0.88); }
.atlas-hero .breadcrumb-item.active { color: rgba(255, 255, 255, 0.62); }

/* --- Plot series legend -------------------------------------------------- */

/* The words in the "Details" tables name lines in the plot above them, so each one
 * carries a swatch in that line's exact colour.
 *
 * A swatch rather than coloured text, because those two goals conflict. The series
 * colours come from b2B/b2B/utils.py and several are far too light to read as text on
 * white: earlyFolding's #17e83e and disoMine's #FFD700 land near 1.6:1, sidechain's
 * #b5b3b2 near 2.0:1. A filled block has no such problem -- it only has to be seen,
 * not read -- so the swatch can be the literal plot colour while the label stays in
 * body ink and stays legible.
 *
 * What this replaced was not merely faint. The words used Bootstrap's semantic
 * utilities, which are not data colours at all: earlyFolding and aggregation were
 * both text-success, two different series identified by the same green, and neither
 * is green in the plot. text-purple did not exist in this build, so "coil" rendered
 * black; text-primary is this theme's green while sheet is drawn blue.
 */
.atlas-series {
  font-weight: 600;
  color: var(--atlas-ink);
  /* So a swatch is never left at the end of a line without its label. */
  white-space: nowrap;
}

.atlas-series::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.35em;
  border-radius: 2px;
  background: var(--atlas-series-color, currentColor);
  /* Outlined, so a pale swatch still has an edge against white. */
  box-shadow: inset 0 0 0 1px rgba(27, 33, 26, 0.28);
}

/* Exactly the values b2B/b2B/utils.py hands to Bokeh. Deliberately not folded into
   the green palette at the top of this file: these are data colours, not brand
   colours, and their only job is to match the figure.

   All nine series are listed, including ppII, which the plots draw but no Details
   table currently names -- the set is kept whole so it can be diffed against
   utils.py in one glance. */
.atlas-series--backbone     { --atlas-series-color: #040100; }
.atlas-series--sidechain    { --atlas-series-color: #b5b3b2; }
.atlas-series--sheet        { --atlas-series-color: #171ae8; }
.atlas-series--helix        { --atlas-series-color: #e82217; }
.atlas-series--coil         { --atlas-series-color: #8d17e8; }
.atlas-series--ppii         { --atlas-series-color: #df7401; }
.atlas-series--earlyfolding { --atlas-series-color: #17e83e; }
.atlas-series--disomine     { --atlas-series-color: #ffd700; }
.atlas-series--agmata       { --atlas-series-color: #053305; }

#protein-list thead th {
  background: var(--atlas-green-050);
  border-bottom: 1px solid var(--atlas-green-200);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
#protein-list td { vertical-align: middle; }
#protein-list code { color: var(--atlas-green-800); }