/* ==========================================================================
   karyon theme

   The two colours are the crate's own: the accent of `Theme::light` for the
   chrome, and the vermillion the examples use to mark a region of interest for
   anything the reader can act on. Both come from the Okabe-Ito palette karyon
   ships, so the site and the figures on it agree, and so the chrome is legible
   to a reader with any of the common colour vision deficiencies.
   ========================================================================== */

[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #0072b2;
  --md-primary-fg-color--light: #3987e5;
  --md-primary-fg-color--dark:  #005587;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: #d55e00;
}

/* The dark scheme is the one `Theme::dark` uses, not an inversion of the light
   one, for the same reason the crate's is. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: hsl(210, 14%, 10%);
  --md-code-bg-color:    hsl(210, 12%, 15%);
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #e8833a;
}

/* The dark scheme needs its own blue, for the same reason it needs its own
   accent. `#0072b2` is chosen to sit on white, and on the dark page it comes
   to 3.38 against the background, under the 4.5 that body text needs: links
   were the hardest thing on the page to read, which is the wrong thing for
   them to be. This is the same hue lifted until it clears, measured rather
   than guessed, and it clears by a margin so it stays legible against the
   code blocks too, which are lighter than the page. */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color:        #068ddb;
  --md-primary-fg-color--light: #38b3fa;
  --md-primary-fg-color--dark:  #0072b2;
  --md-typeset-a-color:         #38b3fa;
}

/* The logo is square and carries the wordmark inside it, so it needs a little
   more height than the default to stay readable beside the site name. */
.md-header__button.md-logo img {
  width: auto;
  height: 1.8rem;
}

/* --------------------------------------------------------------------------
   Figures

   Every figure on this site is an SVG karyon rendered with the light theme, so
   it carries its own white page. On a dark page that reads as a hole unless it
   is given the edges of a printed figure, which is what it is.
   -------------------------------------------------------------------------- */

.md-typeset figure img,
.md-typeset p > img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

[data-md-color-scheme="slate"] .md-typeset figure img,
[data-md-color-scheme="slate"] .md-typeset p > img {
  background: #ffffff;
  padding: 0.4rem;
  box-shadow: 0 0 0 1px hsl(210, 12%, 22%);
}

.md-typeset figure figcaption {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  max-width: 46rem;
  margin: 0.4rem auto 0;
}

/* A wide figure scrolls inside its own box rather than pushing the page. */
.md-typeset .wide {
  overflow-x: auto;
}

/* A single atlas shrunk to the article width made every label illegible. The
   catalogue is a set of previews at reading size; the full atlas remains one
   click away for comparison and download. */
.md-typeset .track-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.md-typeset .track-card {
  display: grid;
  grid-template-rows: 9rem auto;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid #0072b2;
  border-radius: 0.5rem;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.md-typeset .track-card:hover,
.md-typeset .track-card:focus-visible {
  color: inherit;
  border-color: #0072b2;
  box-shadow: 0 0.35rem 1rem hsl(205 100% 20% / 12%);
  transform: translateY(-2px);
}

.md-typeset .track-card img {
  width: 100%;
  height: 9rem;
  box-sizing: border-box;
  padding: 0.45rem;
  object-fit: contain;
  object-position: center;
  background: #ffffff;
  border-radius: 0;
}

.md-typeset .track-card span {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem 0.8rem;
}

.md-typeset .track-card strong {
  font-size: 0.82rem;
}

.md-typeset .track-card small {
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
}

.md-typeset .track-overview {
  margin: 1rem 0 1.5rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.35rem;
}

.md-typeset .track-overview summary {
  cursor: pointer;
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

.md-typeset .track-overview img {
  margin-top: 0.85rem;
}

/* --------------------------------------------------------------------------
   Home page hero
   -------------------------------------------------------------------------- */

.md-typeset .hero {
  text-align: center;
  margin: 0 auto 2rem;
}

/* The logo carries the wordmark, so printing the name again under it says
   "karyon" twice in the same font. The heading stays in the document for the
   outline and for a screen reader, it just does not draw. */
.md-typeset .hero h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.md-typeset .hero p {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
  max-width: 34rem;
  margin: 0.8rem auto 0;
}

.md-typeset .hero-logo {
  height: 9rem;
  width: auto;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Tables

   The track table is thirty-three rows of three columns, and the middle one is
   the only one worth scanning, so it gets the room.
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Plot catalogue

   Discovery and reference are separate jobs. The catalogue uses large,
   image-led routes; the exhaustive track page keeps the long-form contracts.
   The components below are plain links and semantic headings, so the same
   route remains usable without pointer hover or colour.
   -------------------------------------------------------------------------- */

.md-grid {
  max-width: 76rem;
}

.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.md-typeset h2 {
  margin-top: 2.2em;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.md-typeset .plot-hero {
  --plot-accent: #0072b2;
  --plot-tint: hsl(203 100% 35% / 8%);
  position: relative;
  overflow: hidden;
  margin: 0 0 2rem;
  padding: 1.65rem 1.8rem 1.55rem;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--plot-accent) 18%, transparent) 0 5rem, transparent 5.1rem),
    linear-gradient(135deg, var(--plot-tint), transparent 72%);
  border: 1px solid color-mix(in srgb, var(--plot-accent) 28%, var(--md-default-fg-color--lightest));
  border-left: 0.28rem solid var(--plot-accent);
  border-radius: 0.8rem;
}

.md-typeset .plot-hero h1 {
  max-width: 42rem;
  margin: 0.2rem 0 0.55rem;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  line-height: 1.08;
}

.md-typeset .plot-hero > p {
  max-width: 42rem;
  margin: 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.9rem;
}

.md-typeset .plot-eyebrow {
  display: block;
  color: color-mix(in srgb, var(--plot-accent) 78%, var(--md-default-fg-color));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.md-typeset .plot-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.15rem;
}

.md-typeset .plot-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.32rem 0.58rem;
  color: var(--md-default-fg-color--light);
  background: color-mix(in srgb, var(--md-default-bg-color) 86%, transparent);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
  font-size: 0.65rem;
}

.md-typeset .plot-stats strong {
  color: color-mix(in srgb, var(--plot-accent) 78%, var(--md-default-fg-color));
  font-size: 0.78rem;
}

.md-typeset .plot-hero--catalog { --plot-accent: #0072b2; --plot-tint: hsl(203 100% 35% / 9%); }
.md-typeset .plot-hero--signal { --plot-accent: #0072b2; --plot-tint: hsl(203 100% 35% / 8%); }
.md-typeset .plot-hero--annotation { --plot-accent: #009e73; --plot-tint: hsl(164 100% 31% / 8%); }
.md-typeset .plot-hero--variation { --plot-accent: #d55e00; --plot-tint: hsl(26 100% 42% / 8%); }
.md-typeset .plot-hero--reads { --plot-accent: #7b3294; --plot-tint: hsl(285 49% 39% / 8%); }
.md-typeset .plot-hero--comparison { --plot-accent: #cc79a7; --plot-tint: hsl(327 45% 64% / 10%); }
.md-typeset .plot-hero--phylo { --plot-accent: #e69f00; --plot-tint: hsl(41 100% 45% / 10%); }
.md-typeset .plot-hero--world { --plot-accent: #3987e5; --plot-tint: hsl(213 76% 56% / 8%); }

.md-typeset .plot-category-grid,
.md-typeset .plot-card-grid,
.md-typeset .plot-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 1.6rem;
}

.md-typeset .plot-category-card,
.md-typeset .plot-card {
  --card-accent: #0072b2;
  display: grid;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.65rem;
  box-shadow: 0 0.12rem 0.5rem hsl(210 25% 20% / 4%);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.md-typeset .plot-category-card {
  grid-template-columns: minmax(8rem, 42%) 1fr;
  min-height: 12rem;
  border-top: 0.2rem solid var(--card-accent);
}

.md-typeset .plot-category-card:hover,
.md-typeset .plot-category-card:focus-visible,
.md-typeset .plot-card:hover,
.md-typeset .plot-card:focus-visible {
  color: inherit;
  border-color: var(--card-accent);
  box-shadow: 0 0.5rem 1.2rem hsl(210 35% 18% / 12%);
  transform: translateY(-2px);
}

.md-typeset .plot-category-card:focus-visible,
.md-typeset .plot-card:focus-visible,
.md-typeset .plot-route-grid a:focus-visible {
  outline: 0.14rem solid var(--md-accent-fg-color);
  outline-offset: 0.12rem;
}

.md-typeset .plot-category-card img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  box-sizing: border-box;
  padding: 0.55rem;
  object-fit: contain;
  background: #ffffff;
}

.md-typeset .plot-category-card__body,
.md-typeset .plot-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.85rem 0.95rem;
}

.md-typeset .plot-category-card small,
.md-typeset .plot-card small {
  color: color-mix(in srgb, var(--card-accent) 78%, var(--md-default-fg-color));
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.md-typeset .plot-category-card strong,
.md-typeset .plot-card strong {
  margin: 0.15rem 0 0.3rem;
  color: var(--md-default-fg-color);
  font-size: 0.88rem;
  line-height: 1.25;
}

.md-typeset .plot-category-card__body > span,
.md-typeset .plot-card__body > span {
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  line-height: 1.45;
}

.md-typeset .plot-category-card b,
.md-typeset .plot-card b {
  margin-top: auto;
  padding-top: 0.7rem;
  color: color-mix(in srgb, var(--card-accent) 78%, var(--md-default-fg-color));
  font-size: 0.64rem;
}

.md-typeset .plot-category-card--signal { --card-accent: #0072b2; }
.md-typeset .plot-category-card--annotation { --card-accent: #009e73; }
.md-typeset .plot-category-card--variation { --card-accent: #d55e00; }
.md-typeset .plot-category-card--reads { --card-accent: #7b3294; }
.md-typeset .plot-category-card--comparison { --card-accent: #b34f86; }
.md-typeset .plot-category-card--phylo { --card-accent: #b77f00; }
.md-typeset .plot-category-card--world { --card-accent: #3987e5; }

.md-typeset .plot-card {
  grid-template-rows: 10.5rem 1fr;
  border-top: 0.18rem solid var(--card-accent);
}

.md-typeset .plot-card__media {
  display: block;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .plot-card__media img {
  width: 100%;
  height: 10.5rem;
  box-sizing: border-box;
  padding: 0.45rem;
  object-fit: contain;
  background: #ffffff;
}

.md-typeset .plot-route-grid a {
  display: grid;
  gap: 0.22rem;
  padding: 0.8rem 0.9rem;
  color: inherit;
  text-decoration: none;
  background: color-mix(in srgb, var(--md-primary-fg-color) 5%, var(--md-default-bg-color));
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
}

.md-typeset .plot-route-grid a:hover {
  border-color: var(--md-primary-fg-color);
}

.md-typeset .plot-route-grid strong {
  color: var(--md-default-fg-color);
  font-size: 0.73rem;
}

.md-typeset .plot-route-grid span {
  color: var(--md-default-fg-color--light);
  font-size: 0.65rem;
}

.md-typeset .plot-concept-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 1.5rem;
}

.md-typeset .plot-concept-strip > div {
  padding: 0.8rem;
  background: var(--md-code-bg-color);
  border-radius: 0.5rem;
}

.md-typeset .plot-concept-strip strong {
  display: block;
  margin: 0.5rem 0 0.2rem;
  font-size: 0.72rem;
}

.md-typeset .plot-concept-strip p {
  margin: 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.63rem;
}

.md-typeset .plot-chip {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  color: var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 9%, transparent);
  border-radius: 999px;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media screen and (max-width: 76.234375em) {
  .md-typeset .plot-category-card {
    grid-template-columns: 1fr;
  }

  .md-typeset .plot-category-card img {
    height: 9rem;
    min-height: 9rem;
  }
}

@media screen and (max-width: 44.984375em) {
  .md-typeset .plot-hero {
    padding: 1.2rem 1.05rem;
    border-radius: 0.6rem;
  }

  .md-typeset .plot-category-grid,
  .md-typeset .plot-card-grid,
  .md-typeset .plot-route-grid,
  .md-typeset .plot-concept-strip {
    grid-template-columns: 1fr;
  }

  .md-typeset .plot-card {
    grid-template-rows: 9rem 1fr;
  }

  .md-typeset .plot-card__media img {
    height: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .plot-category-card,
  .md-typeset .plot-card {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   The reading measure

   Text was running to two hundred characters a line on any page without a
   left-hand navigation, which is the home page and the one everybody lands on.
   Comfortable is somewhere between forty-five and seventy-five: past that the
   eye loses its place on the way back to the start of the next line, and a
   page of prose becomes work to read for a reason the reader cannot name.

   The measure is capped on the things made of words and nothing else. Figures
   are the point of this site and several of them are two thousand pixels of
   genome browser, so they keep the whole column, as do tables, code blocks and
   the catalogue's own components. That is why this is a list of elements
   rather than a width on the container: a container narrow enough for prose
   would be too narrow for a gallery sheet.
   -------------------------------------------------------------------------- */

.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > blockquote,
.md-typeset > h1,
.md-typeset > h2,
.md-typeset > h3,
.md-typeset > h4,
.md-typeset > .admonition,
.md-typeset > details {
  max-width: 33rem;
  margin-inline: auto;
}

/* A paragraph that is only an image is not prose. The site's figures are
   written that way, so the cap has to let them out again, and they have to
   share the same centre line as the text or the page has two axes and looks
   as though one of them slipped. */
.md-typeset > p:has(> img),
.md-typeset > p:has(> a > img) {
  max-width: none;
  text-align: center;
}


/* --------------------------------------------------------------------------
   Balance on a page with no left navigation

   The home page has no section list under its tab, so Material hides that
   column entirely and the content column becomes the full width of the page.
   The prose then sat hard against the left edge with five hundred pixels of
   nothing between it and the table of contents, which reads as a mistake
   rather than as a choice.

   Centring each capped block rather than the container is what makes this
   work on both kinds of page. Where there is a navigation the column is barely
   wider than the measure, so nothing appears to move; where there is not, the
   text finds the middle. It also needs no `:has()` and no guess about which
   page is which: the same rule is correct either way.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   The chrome gets out of the way

   The header and the tab bar were seventy-seven pixels of fully saturated
   brand blue across the top of every page. On a site whose whole purpose is to
   show figures, and whose figures are full of deliberate colour chosen from a
   palette that is legible to a reader with a colour vision deficiency, the
   loudest thing on the page was the furniture. Chrome that outshouts the
   content is the definition of decoration.

   So the bar becomes the page: the same surface, a hairline underneath it
   instead of a block of colour, and the brand blue kept for the things that
   are actually about the brand or about what the reader can do. The active tab
   is underlined in it, links are it, the logo carries it. It is used where it
   means something and nowhere else, which is the same rule the crate applies
   to ink in a figure.

   This costs nothing in either scheme, because both already have a surface
   colour and a foreground that meet contrast against each other.
   -------------------------------------------------------------------------- */

.md-header,
.md-tabs {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Shadow only once the page has moved under it, so the boundary is a boundary
   rather than a permanent line of weight. */
.md-header[data-md-state="shadow"],
.md-header--shadow {
  box-shadow: 0 0 0.2rem rgb(0 0 0 / 8%), 0 0.2rem 0.4rem rgb(0 0 0 / 8%);
}

.md-tabs {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* The tab labels sit at reading weight, and the one you are on is the only one
   wearing the brand. */
.md-tabs__link {
  color: var(--md-default-fg-color--light);
  opacity: 1;
}

.md-tabs__link:hover,
.md-tabs__link:focus {
  color: var(--md-default-fg-color);
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  color: var(--md-primary-fg-color);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--md-primary-fg-color);
}

/* The search field was a translucent well cut into a coloured bar. On a plain
   surface it needs its own edge instead. */
.md-search__form {
  background-color: var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
}

.md-search__form:hover {
  background-color: var(--md-default-fg-color--lighter);
}

.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: var(--md-default-fg-color--light);
}

/* The repository link and the palette toggle inherited white on blue. */
.md-header__button,
.md-header__topic,
.md-source {
  color: var(--md-default-fg-color);
}

.md-header__button:hover {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Margins on a page that has no columns beside it

   A page that hides both the navigation and the table of contents gets the
   whole grid, and Material's own gutter is sixteen pixels, which on a wide
   screen is not a margin, it is the absence of one. The prose was already
   capped and centred, so what ran edge to edge was everything else: the card
   grid, the code blocks, the admonitions.

   The cap here is on the column rather than on the text, because these are the
   pages where the column is the only thing between the content and the bezel.
   It is wide enough for a two-column card grid and for the widest committed
   figure at its natural size, and no wider.
   -------------------------------------------------------------------------- */

.md-sidebar--secondary[hidden] ~ .md-content .md-content__inner,
.md-content__inner:has(> .md-typeset > .grid.cards) {
  max-width: 60rem;
  margin-inline: auto;
}