/* eskaks docs — PathoGenOmics-Lab mycolorsTB brand, matched to the HTML report. */

/* The brand blue, held in its own variable rather than in Material's `primary`.
   It used to BE `primary`, which meant the masthead, the table headings, the
   buttons and the links were all one setting: the header could not go white
   without dragging the other three to white with it, and a white table heading
   carries white text. Split apart, `primary` decides only what colour the top of
   the page is, and this decides what the brand paints. */
:root {
  --eskaks-brand:        #305595;
  --eskaks-brand-dark:   #244170;
  --eskaks-brand-on:     #ffffff; /* text that sits on the brand blue */
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color:         #b8990a; /* gold, darkened for AA contrast on white */
  --md-accent-fg-color--transparent: #d1ae001a;
}

/* Light scheme: warm off-white canvas from the report. */
[data-md-color-scheme="default"] {
  --md-default-bg-color:  #f9f9f7;
  --md-code-bg-color:     #fcfcfb;
  --md-typeset-a-color:   #305595;
}

/* Dark scheme: near-black canvas + light-blue accent, mirroring the report. */
[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --md-primary-fg-color:  #1d2026;
  --md-default-bg-color:  #0d0d0d;
  --md-default-fg-color:  #ffffff;
  --md-code-bg-color:     #1a1a19;
  --md-typeset-a-color:   #9ec4e8;
  --md-accent-fg-color:   #d1ae00;
}

/* Slightly tighter, more editorial headings. */
.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Brand-tinted admonition for the recurring "watch out" caveat. */
.md-typeset .admonition.watch-out,
.md-typeset details.watch-out {
  border-color: #d1ae00;
}
.md-typeset .watch-out > .admonition-title,
.md-typeset .watch-out > summary {
  background-color: #d1ae001a;
}
.md-typeset .watch-out > .admonition-title::before,
.md-typeset .watch-out > summary::before {
  background-color: #d1ae00;
  -webkit-mask-image: var(--md-admonition-icon--warning);
          mask-image: var(--md-admonition-icon--warning);
}

/* Grid cards: a touch of lift + a brand accent bar on hover. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 6px 20px -12px var(--md-default-fg-color--light);
}
.md-typeset .grid.cards > ul > li > hr {
  margin: 0.6rem 0;
}

/* ------------------------------------------------------------------ hero -- */

/* The landing page opens on what the tool is and the three things a reader
   arriving cold wants: how to start, how to install, where the source lives. */
.eskaks-hero {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  margin-bottom: 2rem;
  padding: 0.6rem 0 1.8rem;
}

/* The wordmark opens the page and carries no frame, having no edges of its own
   to lose. Two files rather than one that decides for itself: Material swaps
   them on the reader's chosen theme, which is not always the system's. The two
   cuts share the same drawing and differ only in fill, #0b0b0b on the light
   canvas (18.7:1) and #f2f2f0 on the dark one (17.3:1). */
.md-typeset .eskaks-hero .eskaks-wordmark {
  border: none;
  border-radius: 0;
  display: block;
  width: min(14rem, 70%);
  height: auto;
  margin: 0 0 0.4rem -0.2rem;
}

/* Material hides the variant that does not match the chosen theme with a
   `display: none` on `img[src$="#only-light"]`. Setting `display: block` on the
   mark above outranks it, so both variants would be drawn, one on top of the
   other. The hiding is restated here at a weight that survives it. */
[data-md-color-scheme="slate"] .md-typeset .eskaks-hero img[src$="#only-light"],
[data-md-color-scheme="default"] .md-typeset .eskaks-hero img[src$="#only-dark"] {
  display: none;
}

/* The name is already set in type by the mark right above. The heading is kept
   for the document outline and for anyone not seeing the image, and taken out
   of the visual flow rather than deleted. */
.md-typeset .eskaks-hero h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin-bottom: 0.6rem;
}

.md-typeset .eskaks-hero .eskaks-hero__lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  max-width: 34em;
}

.md-typeset .eskaks-hero .eskaks-hero__actions {
  margin-top: 1.4rem;
}

.md-typeset .eskaks-hero .eskaks-hero__actions .md-button + .md-button {
  margin-left: 0.4rem;
}

/* Table headings keep the brand blue, which is now stated rather than inherited
   from `primary`. Inherited, they turned white the moment the masthead did, and
   a white heading with white text on it is invisible. */
.md-typeset table:not([class]) th {
  background-color: var(--eskaks-brand);
  color: var(--eskaks-brand-on);
}

/* Material fills a primary button with `primary`, which is now white on the
   light scheme, so the button would vanish into the page. Paint it with the
   brand instead. The slate rules further down already override both. */
[data-md-color-scheme="default"] .md-typeset .md-button--primary {
  background-color: var(--eskaks-brand);
  border-color: var(--eskaks-brand);
  color: var(--eskaks-brand-on);
}
[data-md-color-scheme="default"] .md-typeset .md-button--primary:hover,
[data-md-color-scheme="default"] .md-typeset .md-button--primary:focus {
  background-color: var(--eskaks-brand-dark);
  border-color: var(--eskaks-brand-dark);
}
/* A plain (non-primary) button on the light scheme borrows `primary` for its
   text and border for the same reason, so it needs the same treatment. */
[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary) {
  color: var(--eskaks-brand);
  border-color: var(--eskaks-brand);
}

/* Dark mode: --md-primary-fg-color is dark (#1d2026, for a dark header), but
   Material reuses it for button fills/borders — which then vanish on the near-black
   canvas (~1.2:1). Re-style the hero/content buttons with the light-blue accent. */
[data-md-color-scheme="slate"] .md-button {
  color: #9ec4e8 !important;
  border-color: #9ec4e8 !important;
}
[data-md-color-scheme="slate"] .md-button:hover,
[data-md-color-scheme="slate"] .md-button:focus,
[data-md-color-scheme="slate"] .md-button--primary {
  background-color: #9ec4e8 !important;
  border-color: #9ec4e8 !important;
  color: #0d0d0d !important;
}
[data-md-color-scheme="slate"] .md-button--primary:hover,
[data-md-color-scheme="slate"] .md-button--primary:focus {
  background-color: #bcd8ef !important;
  border-color: #bcd8ef !important;
  color: #0d0d0d !important;
}

/* Note on the marks, which no rule here implements any more.

   The white chip that used to sit behind the header logo and the home hero is
   gone. It was there because the wordmark paints its lettering near-black, which
   vanishes on the slate canvas; a white plate under it bought legibility by
   putting a lit slab in the middle of a dark header, which is the problem moved
   rather than solved. The header now carries the emblem, which needs no plate.
   It holds both chess pieces, and their colours sit at almost the same
   luminance on purpose, so each is about 4.3:1 on the slate masthead and 1.9:1
   on the #305595 light one. That second figure cannot be raised by choosing
   another colour, because the masthead blue sits mid-luminance and anything
   reaching 3:1 against it drops below 3:1 against a white browser tab. It is
   accepted, since a logotype carries no contrast minimum, but it is the weakest
   mark on the site: at the 24px the header actually draws, both pieces keep
   their silhouettes while their internal strokes go soft. The lever that would
   fix that is the masthead colour, not the emblem's.

   The wordmark is left for the home hero, where it is large. It ships in two
   cuts with identical geometry and different fills, and the hero now emits both
   and lets Material pick, through the `#only-light` and `#only-dark` suffixes it
   understands natively. The `content: url()` swap that used to stand here was
   written when the hero emitted a single <img>; it is redundant now and gone,
   since two elements are on the page and the theme hides one of them. See the
   hero block above, which restates that hiding at a surviving weight. */

/* The embedded example report is tall (84vh). On a phone a full-height scrolling
   iframe traps the touch gesture, so the reader can't scroll the page past it.
   Shorten it on small screens, since there is an "Open full-screen" button above
   it, so there is always page to grab, and let the frame scroll if it overflows. */
@media screen and (max-width: 44.9375em) {
  .example-report-frame {
    height: 62vh !important;
    min-height: 360px !important;
    -webkit-overflow-scrolling: touch;
  }
}