/* Site-only diagrams and compact comparison tables; Askr owns reading styles. */
/* Keep the full architecture's native label size instead of shrinking its
   wide handoff graph to a phone's page width. Native focus/scroll remain usable. */
.scq-architecture-flow,
.scq-knowledge-flow {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.scq-architecture-flow .cell-output-display,
.scq-knowledge-flow .cell-output-display {
  overflow: visible;
}

.scq-architecture-flow svg.mermaid-js {
  width: 128rem !important;
  min-width: 128rem;
  max-width: none !important;
}

.scq-knowledge-flow svg.mermaid-js {
  width: 50rem !important;
  min-width: 50rem;
  max-width: none !important;
}

/* This site keeps Quarto's optional reader tool beside the theme tool. */
@media (min-width: 1280px) {
  #quarto-header:not(.askr-areas-collapsed):has(.quarto-reader-toggle) #quarto-search {
    margin-right: calc(2 * (var(--qdk-control-size) * var(--qdk-ui) * var(--_qdk-ui-scale) + var(--qdk-nav-gap)));
  }
}

:root {
  --scq-surface: var(--qdk-canvas);
  --scq-surface-muted: var(--qdk-highlight);
  --scq-text-secondary: var(--qdk-muted);
  --scq-line-subtle: var(--qdk-border);
  --scq-accent: var(--qdk-link);
}

main.content .math.display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  main.content .scq-two-column-table table {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  main.content .scq-two-column-table table th,
  main.content .scq-two-column-table table td {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  main.content .scq-two-column-table table th:first-child,
  main.content .scq-two-column-table table td:first-child {
    width: 40%;
  }
}

.hb-flow-narrow,
.lc-flow-narrow {
  display: none;
}

@media (max-width: 767.98px) {
  .hb-flow-wide,
  .lc-flow-wide {
    display: none;
  }

  .hb-flow-narrow,
  .lc-flow-narrow {
    display: block;
  }
}

.diagram-popout-source {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.diagram-popout-button,
.diagram-popout-toolbar button {
  border: 1px solid var(--scq-line-subtle);
  border-radius: 4px;
  background: var(--scq-surface);
  color: var(--bs-body-color);
  padding: 0.35rem 0.65rem;
}

.diagram-popout-button {
  margin-bottom: 0.75rem;
}

.diagram-popout-dialog {
  width: min(96vw, 1600px);
  height: min(90vh, 1000px);
  border: 1px solid var(--scq-line-subtle);
  border-radius: 6px;
  padding: 0;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.diagram-popout-dialog::backdrop {
  background: rgb(17 24 39 / 60%);
}

.diagram-popout-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--scq-line-subtle);
}

.diagram-popout-body {
  height: calc(100% - 3rem);
  overflow: auto;
  padding: 1rem;
}

.diagram-popout-body svg,
.diagram-popout-body .mermaid {
  min-width: 1440px;
  max-width: none;
  height: auto;
}