/* The door number. Every page keeps its own look and wears the mark top
   right, like a race car keeps its number whatever the livery. The M takes
   the page's colour (currentColor, or --door-m), the square one colour from
   the paddock (--door-sq). The SVG itself is rendered from src/mark.js in m2de/brand. */
.mm-door {
  display: inline-flex;
  flex: none;
  align-items: center;
  width: var(--door-w, 42px);
  color: var(--door-m, currentColor);
  line-height: 0;
  text-decoration: none;
  border: 0 !important;
}
.mm-door svg { display: block; width: 100%; height: auto; overflow: visible; }
.mm-door .mm-sq { fill: var(--door-sq, #E10A23); }
.mm-door:hover .mm-sq,
.mm-door:focus-visible .mm-sq { animation: mm-door-blink 1.06s steps(1) infinite; }
.mm-door:focus-visible { outline: 2px solid var(--door-sq, #E10A23); outline-offset: 4px; }
@keyframes mm-door-blink { 50% { opacity: 0; } }

/* Pages without a top bar to sit in: pinned to the top right of the page */
.mm-door.is-pinned {
  position: absolute;
  top: var(--door-top, 20px);
  right: var(--door-right, 20px);
  z-index: 60;
}

@media (max-width: 640px) {
  .mm-door { width: var(--door-w-sm, 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-door .mm-sq { animation: none !important; }
}

/* Inside a line of breadcrumb text */
.mm-door.is-inline { vertical-align: middle; margin-left: 14px; position: relative; top: -1px; }