/* Tools overview and manuals (content/tools/*.md): availability badges
   below each tool's heading, and one row with the launch button and the
   secondary links. */

.md-typeset .tool-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .3em;
  margin: -.4em 0 .6em;         /* sit right under the heading */
}
.md-typeset .tool-badge {
  padding: .05em .55em;
  border-radius: .2em;
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-size: .75em;
  white-space: nowrap;
}
.md-typeset .tool-badge--online {
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-typeset-a-color);
}
.md-typeset .tool-badge--draft {
  background: hsla(40, 100%, 50%, .2);
  color: var(--md-default-fg-color);
  font-weight: 700;
}

/* The launch button looks like the apps' primary button
   (tools/shared/css/forms.css), with the soft accent tint instead of the fill. 1rem is 20px here. */
.md-typeset .tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em .35em;
  font-size: .75rem;            /* 15px, like the apps */
  line-height: 1.4;
}
.md-typeset .tool-actions .tool-launch {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-right: .6em;
  padding: .4em .9em;
  border: 1px solid #526cfe66;
  border-radius: 5px;
  background: #526cfe1a;        /* the apps' --accent-soft */
  color: #3f55d9;               /* --accent-text */
  text-decoration: none;
}
.md-typeset .tool-actions .tool-launch:hover {
  border-color: #526cfe;
  background: #526cfe2e;
  color: #3f55d9;
}
[data-md-color-scheme="slate"] .md-typeset .tool-actions .tool-launch,
[data-md-color-scheme="slate"] .md-typeset .tool-actions .tool-launch:hover {
  color: #9aa8f5;               /* --accent-text, dark */
}
.md-typeset .tool-actions .tool-launch:focus-visible {
  outline: 2px solid #526cfe;
  outline-offset: 2px;
}
/* touch screens: 44px like the apps' controls */
@media (pointer: coarse) {
  .md-typeset .tool-actions .tool-launch { min-height: 44px; box-sizing: border-box; }
}
/* phone: the button on its own line, the links below it */
@media screen and (max-width: 30em) {
  .md-typeset .tool-actions { display: block; }
  .md-typeset .tool-actions .tool-launch {
    display: flex;
    width: fit-content;
    margin-bottom: .6em;
  }
}
/* Anchor the navigation to the theme's normal 61rem grid. Let the dashboard
   extend to the right without shifting the sidebar towards the window edge.
   On smaller screens the content uses the available width. */
.md-grid:has(.voici-page) {
  max-width: none;
  margin-inline-start: max(0rem, calc((100% - 61rem) / 2));
  margin-inline-end: 0;
}
.voici-page {
  min-width: 0;
}
.voici-page .md-content__inner {
  max-inline-size: 90ch;
}
.voici-frame {
  display: block;
  width: 100%;
  border: 0;
}
.md-typeset .tools-release {
  margin: 0 0 1rem;
  color: var(--md-default-fg-color--light);
  font-size: .75rem;
}
/* Project bar (overrides/partials/project-bar.html): the same sections in
   the same order on every page of a project. */
.md-typeset .project-bar {
  margin: 0 0 1.2rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  font-size: .75rem;
}
.md-typeset .project-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.md-typeset .project-bar li { margin: 0; }
/* the theme indents lists inside .md-typeset; the bar aligns with the text */
.md-typeset .project-bar ul { margin-left: 0; }
.md-typeset .project-bar a[aria-current="page"] {
  color: var(--md-default-fg-color);
  font-weight: 700;
}
.md-typeset .project-bar p {
  margin: .3rem 0 0;
  color: var(--md-default-fg-color--light);
}

/* WCAG 1.4.3: the theme colours the active navigation link with the accent
   (#526cfe), which is 3.75:1 on its tint in the light palette and 4.2:1 on the
   dark background. These shades give at least 4.5:1. */
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item .md-nav__link--active {
  color: #3a4fd0;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item .md-nav__link--active {
  color: #9aa8f5;
}

/* Repository link with the GitHub icon in the project bar and the tools
   release line (scripts/stage_projects.py, scripts/stage_tools.py). */
.md-typeset .repo-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.md-typeset .repo-link .md-icon svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentcolor;
  vertical-align: -.15em;
}

/* prefers-contrast: more - stronger borders and no muted text. */
@media (prefers-contrast: more) {
  .md-typeset .project-bar,
  .parts-preview, .parts-toolbar, .parts-caption {
    border-color: var(--md-default-fg-color);
  }
  .md-typeset .tools-release,
  .md-typeset .project-bar p,
  .parts-hint {
    color: var(--md-default-fg-color);
  }
  .md-typeset .tool-actions .tool-launch { border-color: currentcolor; }
}

/* Windows high-contrast / forced colours: system colours for the custom
   controls, the current project page stays marked by weight and underline. */
@media (forced-colors: active) {
  .md-typeset .tool-actions .tool-launch { border-color: ButtonText; }
  .md-typeset .project-bar a[aria-current="page"] { text-decoration: underline; }
}

/* The page heading receives focus after instant navigation (a11y.js); it is
   not interactive, so it needs no focus ring. */
.md-content h1[tabindex="-1"]:focus { outline: none; }

/* Diagrams (inline SVG in the manuals) fill the text column; the theme's
   shrink-to-fit figure would render them at about two thirds of it. */
.md-typeset figure.diagram {
  display: block;
  width: 100%;
}