/* DOCS+EDIT-FIRST: read code-docs/static/css/figure_frame.css.md before editing (comments live there). */

:root { /*@ff-tokens*/
  --exam-ink:#1a1a1a; --toolbar-grey:#e8e8ea; --fs-sm: 0.85rem;
}

.q-fig-frame { /*@fig-frame*/
  display: block;
  width: calc(50% * var(--rzoom, 1));
  max-width: 100%;
  margin: 0.25rem auto;
  background: #fff;
  border: 1px solid var(--border-grey);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.q-fig-bar { /*@fig-bar*/
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  padding: 0.15rem 0.35rem;
  background: var(--toolbar-grey);
  border-bottom: 1px solid var(--border-grey);
}
.q-fig-readout { /*@fig-readout*/
  min-width: 2.9em;
  padding: 0.1rem 0.3rem;
  color: var(--text-secondary);
  font: 400 var(--fs-sm) var(--font-ui);
  line-height: 1;
  text-align: center;
}
.q-fig-reset { /*@fig-reset*/
  border: none;
  background: none;
  color: var(--exam-ink);
  font: 400 var(--fs-sm) var(--font-ui);
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm);
}
.q-fig-reset:hover { background: rgba(0, 0, 0, 0.08); }
.q-fig-sep { align-self: stretch; width: 1px; margin: 3px 0.2rem; background: var(--border-grey); } /*@fig-sep*/
.q-fig-popout, .q-fig-zoom-btn { /*@fig-popout-btn*/
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.q-fig-popout:hover, .q-fig-zoom-btn:hover { background: rgba(0, 0, 0, 0.08); color: var(--exam-ink); }
.q-fig-popout svg, .q-fig-zoom-btn svg { width: 0.95rem; height: 0.95rem; }

.q-fig-body { display: flex; align-items: safe center; justify-content: safe center; padding: 0; overflow: hidden; cursor: default; -webkit-user-select: none; user-select: none; } /*@fig-body*/
.q-fig-body.is-pannable { cursor: grab; } /*@fig-pan-cursor*/
.q-fig-body.is-panning { cursor: grabbing; }
.q-fig-body img, .q-fig-body svg, .q-fig-lb-content img, .q-fig-lb-content svg { -webkit-user-drag: none; user-select: none; } /*@fig-nodrag*/
.q-fig-zoom { flex: 0 0 auto; width: calc(100% * var(--fz, 1)); } /*@fig-zoom-layer*/
.q-fig-body .q-image-display,
.q-fig-body .q-svg-fig {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.q-fig-body .q-svg-fig > svg { width: 100%; height: auto; }

svg text[font-family="Crimson Text, serif"] { font-family: "Minion Pro", serif; } /*@svg-minion-retarget*/

.graph-slot { display: flex; justify-content: center; align-items: center; } /*@graph-slot*/
.graph-slot.graph-slot { margin: 0; padding-top: 0.25rem; } /*@graph-slot-inline-gap*/
.graph-slot.graph-slot + div { padding-top: 0.25rem; }
.graph-slot .q-fig-frame { margin: 0 auto; }

.q-table-scroll { /*@q-table-scroll*/
  max-width: 100%;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  padding-top: 0 !important;
}

.q-fig-frame-choice { /*@fig-frame-choice*/
  width: fit-content;
  max-width: 100%;
  margin: 0;
}
.q-fig-frame-choice .q-fig-body img { margin: 0; }

.q-fig-lightbox { /*@fig-lightbox*/
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(0, 0, 0, 0.55);
}
.q-fig-lb-stage { /*@fig-lb-stage*/
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 92vw;
  max-height: 90vh;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.q-fig-lb-bar { /*@fig-lb-bar*/
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  padding: 0.2rem 0.5rem;
  background: var(--toolbar-grey);
  border-bottom: 1px solid var(--border-grey);
}
.q-fig-lb-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--exam-ink);
  font: 400 var(--fs-sm) var(--font-ui);
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}
.q-fig-lb-bar button:hover { background: rgba(0, 0, 0, 0.08); }
.q-fig-lb-bar .q-fig-lb-zoom svg { width: 1.05rem; height: 1.05rem; }
.q-fig-lb-close { font-size: 1rem; }
.q-fig-lb-readout { min-width: 3.2em; text-align: center; font: 400 var(--fs-sm) var(--font-ui); color: var(--text-secondary); }
.q-fig-lb-sep { align-self: stretch; width: 1px; margin: 3px 0.25rem; background: var(--border-grey); }
.q-fig-lb-scroll { /*@fig-lb-scroll*/
  flex: 1 1 auto;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  min-height: 0;
  overflow: hidden;
  padding: 1.5rem 1.6rem;
}
.q-fig-lb-scroll.is-pannable { cursor: grab; }
.q-fig-lb-scroll.is-panning { cursor: grabbing; }
.q-fig-lb-content { /*@fig-lb-content*/
  width: calc(var(--lbw, 400px) * var(--lbz, 1));
  flex: 0 0 auto;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.q-fig-lb-content img,
.q-fig-lb-content .q-svg-fig {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto;
  margin: 0;
}
.q-fig-lb-content .q-svg-fig > svg { width: 100%; height: auto; }