/*
 * Copyright (c) 2026 Apurva Nakade. All rights reserved.
 * Released under Apache 2.0 license as described in the file LICENSE.
 * Authors: Apurva Nakade
 */

/* Embed mode's stylesheet, shipped with embed.js by `mathviz: {embed: true}`
 * (or by share, which needs it). */

/* html.vm-embed is set by embed.js when the URL carries ?embed=1 -- another
 * site framing one of these apps in an <iframe>. Everything that is the site
 * rather than the app goes: navbar, sidebar and its glass/rail, the title
 * block (the framing page has its own heading), footer, prev/next
 * navigation, and mathviz's mobile, report-bug and share affordances (each
 * of whose scripts also skips itself, so this is belt and braces for the
 * paint before they run). A site's own chrome opts in with a
 * data-vm-embed-hide attribute rather than being named here -- Visual Math
 * Lab's consent banner does. The class is on <html> rather than <body>
 * because the script runs in <head>, before <body> exists -- which is also
 * why nothing flashes. */
html.vm-embed #quarto-header,
html.vm-embed #quarto-sidebar,
html.vm-embed #quarto-sidebar-glass,
html.vm-embed .quarto-secondary-nav,
html.vm-embed #vm-sidebar-rail,
html.vm-embed #title-block-header,
html.vm-embed .nav-footer,
html.vm-embed .footer,
html.vm-embed .page-navigation,
html.vm-embed #quarto-margin-sidebar,
html.vm-embed .vm-mobile-warning,
html.vm-embed [data-vm-embed-hide],
html.vm-embed .vm-report-bug-popup,
html.vm-embed .vm-share-bar,
html.vm-embed .vm-share-dialog {
  display: none !important;
}

/* Quarto pads the body down by the fixed navbar's height; with no navbar
 * that is a blank strip at the top of the frame. */
html.vm-embed body.nav-fixed {
  padding-top: 0 !important;
}

html.vm-embed #quarto-content {
  padding-top: 0.5rem;
  /* Quarto's page grid is at least a viewport tall ("allow space for
   * footer" in quarto-nav.js, which writes it as an inline style, hence the
   * !important) and reserves a 60px second row for the prev/next
   * navigation, hidden above. With the app sized to the frame below, both
   * were a strip of nothing under it that made the frame scroll anyway. */
  min-height: 0 !important;
  grid-template-rows: [content-top] minmax(max-content, 1fr) [content-bottom] 0 [page-bottom];
}

/* Only the tagged app is the app. Each app page wraps its controls panel,
 * slider bar and main chart in <div class="vm-app">, and embed.js
 * marks the one to show (embed=<id>, else the first) vm-app-active once the
 * DOM exists; everything else in the content column -- the explanation,
 * theorem callouts, the convergence plots and iteration tables under a
 * chart -- is exposition and goes. Three things survive: the block itself,
 * what is inside it, and its ancestors, because a hidden ancestor can't have
 * a visible descendant and Quarto wraps everything under a ## heading in a
 * <section>, so a block is not always a direct child of the column (the
 * combinatorial proof's third app isn't). A top-level <style> block is
 * unaffected (display: none doesn't switch a stylesheet off), and hidden
 * OJS cells still run, so helper cells may sit on either side of the
 * wrapper. */
html.vm-embed #quarto-document-content :not(.vm-app-active):not(.vm-app-active *):not(:has(.vm-app-active)) {
  display: none !important;
}

/* The chart takes the height the frame leaves, not 72vh of it.
 *
 * On the page, .plotly-box-large is 72vh: the chart is sized to the reader's
 * screen and the controls above it scroll off. In a frame that never adds
 * up: the controls are a fixed ~500-600px, the chart is 72% of whatever
 * height the frame has, and the two only fit together in a frame taller
 * than ~2000px -- at any sensible height the app scrolls inside the frame,
 * which is the one thing embed.qmd promises it won't need to. So in embed
 * mode the app is a column exactly one frame tall, the controls keep their
 * natural height, and the chart is what is left -- the same division of the
 * viewport the fullscreen chain in mathviz's chart-block.css makes, minus
 * the letterboxing (in a frame the chart's aspect ratio is the framing
 * page's to choose). Quarto/Observable's wrapper divs between the block and
 * the graph div are matched with :has(), as in that chain, so the rule
 * doesn't depend on what they are named. Pages whose figure is an SVG
 * (.ojs-svg-block) draw at their own fixed height and are unaffected: every
 * rule below is gated on .js-plotly-plot, so nothing there is stretched or
 * pushed to the bottom of the frame.
 *
 * The 300px floor is a frame too short for its app -- the chart holds at
 * something readable and the frame scrolls, rather than the chart vanishing
 * under the controls. A frame the size embed.qmd recommends never hits it. */
html.vm-embed #quarto-document-content {
  margin: 0;
  padding: 0;
}

html.vm-embed .vm-app-active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 1rem);
}

html.vm-embed .vm-app-active > .ojs-chart-block:has(.js-plotly-plot) {
  flex: 1 1 auto;
  min-height: 0;
}

html.vm-embed .vm-app-active > .ojs-chart-block div:has(.js-plotly-plot) {
  height: 100%;
  min-height: 0;
}

/* The outermost link is a flex item of the block's column and takes what the
 * slider bar leaves; same specificity as the rule above, so it stays after
 * it. */
html.vm-embed .vm-app-active > .ojs-chart-block > div:has(.js-plotly-plot) {
  flex: 1 1 auto;
  height: auto;
  margin-bottom: 0;
}

html.vm-embed .vm-app-active .plotly-box-large {
  height: 100%;
  min-height: 300px;
}