/* Diagrams.

   They are hand written SVG, inline in the pages, and they take their colours
   from the three marks of the Meridiaan logo: blue for a Workspace, pink for a
   Collection, orange for what is written inside one. Everything else comes
   from the theme, so a diagram follows the light and the dark palette without
   a second set of colours to keep aligned. */

:root {
  --dgm-blue: #507cc4;
  --dgm-pink: #df7f9f;
  --dgm-orange: #e9602e;
}

.dgm {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 2.2em auto;
}

.dgm text {
  font-family: var(--md-text-font-family), sans-serif;
}

.dgm .dgm-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--md-default-fg-color--light);
}

.dgm .dgm-label {
  font-size: 15px;
  font-weight: 600;
  fill: var(--md-default-fg-color);
}

.dgm .dgm-sub {
  font-size: 13px;
  font-weight: 600;
  fill: var(--md-default-fg-color);
}

.dgm .dgm-note {
  font-size: 12px;
  fill: var(--md-default-fg-color--light);
}

.dgm .dgm-mono {
  font-family: var(--md-code-font-family), monospace;
  font-size: 13px;
  fill: var(--md-default-fg-color);
}

.dgm .dgm-mid {
  text-anchor: middle;
}

/* A dashed outline is a boundary you are told about; a filled card is a thing
   you can point at. The Organization is the first, a Workspace the second. */
.dgm .dgm-frame {
  fill: none;
  stroke: var(--md-default-fg-color--lightest);
  stroke-width: 1.5px;
  stroke-dasharray: 6 6;
}

.dgm .dgm-frame-live {
  stroke: var(--dgm-orange);
  stroke-opacity: 0.55;
}

.dgm .dgm-kicker-live {
  fill: var(--dgm-orange);
}

.dgm .dgm-card {
  fill: var(--md-code-bg-color);
  stroke: var(--md-default-fg-color--lightest);
  stroke-width: 1px;
}

.dgm .dgm-chip,
.dgm .dgm-pill {
  fill: var(--md-default-bg-color);
  stroke: var(--md-default-fg-color--lightest);
  stroke-width: 1px;
}

.dgm .dgm-bar {
  fill: var(--dgm-orange);
  opacity: 0.42;
}

.dgm .dgm-dot-a { fill: var(--dgm-blue); }
.dgm .dgm-dot-b { fill: var(--dgm-pink); }
.dgm .dgm-dot-c { fill: var(--dgm-orange); }

.dgm .dgm-arrow {
  fill: none;
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.5px;
}

.dgm .dgm-head {
  fill: var(--md-default-fg-color--light);
  stroke: none;
}

/* Whatever is there to say "and more of these", without asking for attention. */
.dgm .dgm-quiet {
  opacity: 0.45;
}