/*
 * Copyright © 2026 Krzysztof Kasprowicz
 * Licensed under the Apache License, Version 2.0. See LICENSE in the project root for license information.
 * Project repository: https://github.com/Krzysztof318/MailFathom
 */

/* Almost everything here belongs to the two additions `main.js` makes. The rest of the appearance is
   the `modern` template's, deliberately: a theme of our own would be one more thing to carry forward
   across docfx versions, and this site has no design problem that the default one fails to solve. */

/* The exception, and it is the template's gap rather than a preference. `modern` styles
   `.navbar-brand` and nothing inside it, because its own logo is an SVG whose intrinsic size already
   fits a header; a raster logo arrives at whatever size the file is, which put a 180-pixel square
   over the top of every page. The height is stated and the width follows the aspect ratio, so
   replacing the file with one of different proportions changes nothing here. */
.navbar-brand > #logo {
  height: 1.75rem;
  width: auto;
  margin-inline-end: 0.5rem;
}

.mf-version-picker {
  /* `flex-nowrap` on the header's container makes every child shrinkable, and a select that shrinks
     to its container reads as a sliver rather than as a control. */
  flex: 0 0 auto;
  width: auto;

  /* The picker sits in `#navbar`, in front of the icon links, and this is what carries it to that end
     of the header rather than leaving it against the section links. */
  margin-inline-start: auto;
  margin-inline-end: 0.5rem;
}

/* `modern` pushes the icon links to that same end with an auto margin of its own, and a flex row divides
   its free space equally among every auto margin on it rather than spending it at the first: two of them
   leave the picker stranded mid-header with the icons half a gap further on. Withdrawing the template's
   margin leaves the picker's as the only claim on that space, so it travels to that end and the icon
   links follow immediately. Below the navbar's breakpoint `modern` replaces that margin with
   `margin: 1rem 0`, whose left margin is this same zero, so the collapsed panel is unaffected.

   The selector is the template's own, `.navbar` and all, because a declaration is only withdrawn by one
   that matches its specificity — `#navbar form.icons` carries one class fewer and loses however late it
   is read. `margin-left` for the same reason: it is the property `modern` declares, so cancelling it
   takes nothing on trust about how a logical property reaches a physical one through the cascade. */
.navbar #navbar form.icons {
  margin-left: 0;
}

/* Below the navbar's breakpoint `#navbar` becomes a column and the auto margin above would push the
   picker against the right edge of an otherwise left-aligned panel. `order` places it after the section
   links and ahead of the search box, which `modern` orders at 30 and the icon links at 40. */
@media (max-width: 767.98px) {
  .mf-version-picker {
    order: 20;
    align-self: stretch;
    margin-inline: 0;
    margin-block-start: 1rem;
  }
}

.mf-version-notice {
  margin-bottom: 1.5rem;
}

/* The affordance matters more than usual here: a Mermaid diagram looks like a picture rather than
   like a control, so nothing else on the page suggests that it opens. */
article img[src],
article pre.mermaid {
  cursor: zoom-in;
}

.mf-viewer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgb(0 0 0 / 80%);
  touch-action: none;
  overscroll-behavior: contain;
}

.mf-viewer[hidden] {
  display: none;
}

.mf-viewer-stage {
  cursor: grab;
  transform-origin: center center;
  will-change: transform;
}

.mf-viewer-panning .mf-viewer-stage {
  cursor: grabbing;
}

/* The copy the viewer shows starts at the size the page would have given it and is scaled from
   there, so opening a diagram never reflows it into a different layout than the one being read. */
.mf-viewer-stage > * {
  max-width: 92vw;
  max-height: 88vh;
  margin: 0;
  background: var(--bs-body-bg);
  border-radius: 0.5rem;
  padding: 1rem;
}

.mf-viewer-stage img {
  display: block;
  object-fit: contain;
}

.mf-viewer-stage svg {
  max-width: 100%;
  height: auto;
}

.mf-viewer-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bs-body-bg);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 30%);
}

body.mf-viewer-open {
  overflow: hidden;
}