/* JFlySpeed blue palette. Hue follows #84b8db while each shade keeps its original saturation and brightness. */
:root {
  --md-primary-fg-color: #4d92c0;
  --md-primary-fg-color--light: #83bfe8;
  --md-primary-fg-color--dark: #66aede;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: hsla(0, 0%, 100%, .7);
  --md-accent-fg-color: #66aede;
  --md-accent-fg-color--transparent: rgba(102, 174, 222, .1);
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: hsla(0, 0%, 100%, .7);
}

/* Header logo renders small by default, so bump it up a little. */
.md-header__button.md-logo img {
  height: 1.8rem;
  width: auto;
}

/* Per-scheme header logo: white mark on dark, black mark on light.
   overrides/partials/logo.html renders both marks (header and nav drawer);
   only one shows. Specificity beats the theme's display:block on logo imgs. */
[data-md-color-scheme="slate"] .md-header__button.md-logo img.md-logo__img--light,
[data-md-color-scheme="slate"] .md-nav .md-nav__title .md-logo img.md-logo__img--light {
  display: none;
}
[data-md-color-scheme="default"] .md-header__button.md-logo img.md-logo__img--dark,
[data-md-color-scheme="default"] .md-nav .md-nav__title .md-logo img.md-logo__img--dark {
  display: none;
}

/* Content column runs wider than the 61rem default. Single tunable. */
.md-grid {
  max-width: 68rem;
}

/* Nav sidebars keep a slimmer scrollbar than the .2rem default.
   Firefox stays on scrollbar-width: thin, already its minimum. */
.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: .15rem;
  height: .15rem;
}

/* Search results read bigger: wider popup than the 20rem default
   with roomier type than the .64rem default. */
:root {
  --md-tooltip-width: 26rem;
}

[role="dialog"] > .md-tooltip2__inner {
  font-size: .72rem;
}

/* Screenshot grids: one reusable system for gallery groups. Every group is
   two columns wide: shots-2x1 holds one row, shots-2x2 holds two,
   shots-2x3 holds three. */
.shots {
  display: grid;
}
.shots-2x1,
.shots-2x2,
.shots-2x3 {
  grid-template-columns: repeat(2, 1fr);
}
/* 2% margin on every side of each tile reads as 4% gutters between tiles. */
.shots > * {
  margin: 2%;
  min-width: 0;
}
.shots img {
  width: 100%;
  height: auto;
  display: block;
}
/* GitHub header button: title plus dimmer subheader, stacked inside
   the theme's repository slot. Both lines inherit the theme's own
   source size (the subheader reads smaller through dimming alone),
   so no fixed size can drift from the built theme again. */
.md-source__title,
.md-source__subheader {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-source__subheader {
  opacity: .75;
}

/* Keep both source links together and place search after them in the header. */
@media screen and (min-width: 60em) {
  .md-header__source {
    display: flex;
    order: 1;
    width: 20.5rem;
    max-width: 20.5rem;
  }
  .md-header__inner > form[data-md-component="palette"] {
    order: 2;
  }
  .md-header__inner > label[for="__search"],
  .md-header__inner > .md-search {
    order: 3;
  }
  .md-header__source .md-source {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Empty slots keep a 16:9 frame until real screenshots land. */
.shot-empty {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 2px dashed #999999;
  outline-offset: -2px;
  font-size: .8rem;
  opacity: .8;
}