:root {
  --md-primary-fg-color: #2563eb;
  --md-primary-fg-color--light: #3b82f6;
  --md-primary-fg-color--dark: #1d4ed8;
  --md-accent-fg-color: #1d4ed8;
  --md-typeset-a-color: #2563eb;
  --md-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --md-default-fg-color: #1a1a2e;
}

/* White header like rapidfeedback.net, so the blue mark stays visible. */
.md-header {
  background: rgba(255, 255, 255, 0.97);
  color: #0c1e4a;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: none;
}

.md-header[data-md-state="shadow"],
.md-header--shadow {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.md-header__title {
  font-weight: 800;
}

.md-header__button.md-logo img {
  height: 1.8rem;
}

@media screen and (min-width: 60em) {
  .md-search__input {
    background-color: #f1f5f9;
    color: #0f172a;
  }

  .md-search__input::placeholder,
  .md-search__input + .md-search__icon {
    color: #64748b;
  }

  .md-search__input:hover {
    background-color: #e2e8f0;
  }
}

.md-typeset {
  font-size: 0.85rem;
  line-height: 1.65;
}

.md-typeset h1 {
  color: #1a1a2e;
  font-weight: 700;
}

.md-typeset .lead {
  font-size: 1.05em;
  color: #3a3f52;
}

/* Screenshots: final files and placeholders share these classes. */
.md-typeset .shots {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  margin: 1em 0 1.5em;
}

.md-typeset .shots p {
  display: contents;
}

.md-typeset img.shot {
  border: 1px solid #dde1e9;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(5, 17, 42, 0.08);
  background: #fff;
}

.md-typeset img.shot.desktop {
  flex: 1 1 26rem;
  width: 100%;
  max-width: 40rem;
}

/* Phone outline: mobile pictures are bare 390-wide screens; the frame is added here. */
.md-typeset img.shot.mobile {
  flex: 0 0 auto;
  width: 13.5rem;
  max-width: 60%;
  border: 0.5rem solid #1f2433;
  border-top-width: 1.1rem;
  border-bottom-width: 1.1rem;
  border-radius: 1.7rem;
  background: #1f2433;
}

/* Long runs of pictures (the hello@ emails) sit two to a row. */
.md-typeset .shots:has(img.shot:nth-of-type(3)) img.shot.desktop {
  flex: 1 1 18rem;
  max-width: calc(50% - 0.5rem);
}

.md-typeset .steps > li {
  margin-bottom: 0.6em;
}

.md-typeset .you-see {
  color: #3a3f52;
}

.md-typeset kbd,
.md-typeset .btn {
  display: inline-block;
  padding: 0 0.45em;
  border: 1px solid #cdd1db;
  border-radius: 6px;
  background: #f4f5f7;
  font-weight: 600;
  font-size: 0.92em;
  white-space: nowrap;
}

.md-typeset .grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.8rem;
  margin: 1em 0;
}

.md-typeset .grid-cards > div {
  border: 1px solid #dde1e9;
  border-radius: 10px;
  padding: 0.8rem 1rem;
}

.md-typeset .grid-cards > div p {
  margin: 0.3em 0;
}

.md-typeset .download-row a {
  margin-right: 1.2em;
}

/* Print and PDF */
.guide-cover {
  text-align: center;
  padding-top: 8rem;
}

.guide-cover h1 {
  font-size: 2.4rem;
  margin: 1rem 0 0.4rem;
}

.guide-cover-sub {
  font-size: 1.2rem;
  color: #3a3f52;
}

.guide-cover-url,
.guide-cover-help {
  color: #64748b;
}

@page {
  size: letter portrait;
  margin: 16mm 14mm 18mm;

  @bottom-left {
    content: "Rapid Feedback User Guide";
    font: 8pt -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #64748b;
  }

  @bottom-center {
    content: none;
  }

  @bottom-right {
    content: counter(page) " / " counter(pages);
    font: 8pt -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #64748b;
  }
}

@media print {
  .md-typeset {
    font-size: 10.5pt;
  }

  .md-typeset .shots {
    flex-wrap: nowrap;
    gap: 4%;
    break-inside: avoid;
  }

  .md-typeset img.shot,
  .md-typeset .admonition,
  .md-typeset table {
    break-inside: avoid;
  }

  .md-typeset img.shot.desktop {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 68%;
  }

  .md-typeset img.shot.mobile {
    flex: 0 0 22%;
    width: 22%;
    max-width: 22%;
  }

  .md-typeset .shots:has(img.shot:nth-of-type(3)) {
    flex-wrap: wrap;
    row-gap: 1rem;
    break-inside: auto;
  }

  .md-typeset .shots:has(img.shot:nth-of-type(3)) img.shot.desktop {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .md-typeset .headerlink,
  .md-typeset .download-row {
    display: none;
  }

  .md-typeset a {
    color: #1d4ed8;
  }
}