/* Colors inherit across the native Mermaid shadow boundary. */
:root {
  --arch-service: #eef3ff; --arch-service-line: #4d6cb3;
  --arch-store: #e9f5f1; --arch-store-line: #27796b;
  --arch-process: #fff3db; --arch-process-line: #99701d;
}
[data-md-color-scheme="slate"] {
  --arch-service: #202e49; --arch-service-line: #91b3ff;
  --arch-store: #193b36; --arch-store-line: #78cdb9;
  --arch-process: #40331e; --arch-process-line: #e3ba67;
}
.architecture-kicker {
  color: var(--md-accent-fg-color); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1rem;
}
.md-typeset figure.architecture-diagram {
  display: block; width: 100%;
  min-width: 0; margin: 1.4rem 0 1.7rem; padding: .8rem;
  border: 1px solid var(--md-default-fg-color--lighter); border-radius: .65rem;
  background: var(--md-code-bg-color);
}
.architecture-diagram figcaption {
  margin-top: .75rem; color: var(--md-default-fg-color--light);
  font-size: .7rem; line-height: 1.6;
}
.architecture-diagram .mermaid { width: max-content; min-width: 100%; }
.architecture-scroll { text-align: center; overflow: auto; max-width: 100%; padding: .5rem; }
.architecture-controls { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
.architecture-button {
  border: 1px solid var(--md-default-fg-color--lighter); border-radius: .3rem;
  padding: .35rem .65rem; font: inherit; font-size: .7rem; cursor: pointer;
  color: var(--md-default-fg-color); background: var(--md-default-bg-color);
}
.architecture-button:hover { border-color: var(--md-accent-fg-color); }
.architecture-button:focus-visible, .architecture-scroll:focus-visible {
  outline: 2px solid var(--md-accent-fg-color); outline-offset: 3px;
}
.architecture-dialog {
  width: calc(100vw - 2rem); max-width: 1600px; max-height: calc(100vh - 2rem);
  padding: 1rem; border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .65rem; color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
}
.architecture-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.architecture-dialog .architecture-scroll { max-height: calc(100vh - 9rem); }
.architecture-dialog h2 { font-size: 1rem; margin: 0; }
.architecture-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (max-width: 600px) {
  .architecture-diagram { margin-inline: 0; padding: .45rem; }
  .architecture-scroll { padding: .25rem; }
}