/*
 * Styles for the compute/cost efficiency figure on this post.
 *
 * Extracted from an inline <style> in index.md so the post can be MDX: MDX
 * parses raw HTML as JSX, and every CSS rule body is a bare { to the parser.
 *
 * Referenced by a <link> at the same point in the document, so it keeps its
 * position in the cascade relative to blog-post.css. Moving it into <head>
 * would reverse that and let blog-post.css win on equal specificity.
 */
  /* This figure's caption swaps with the axis toggle, so its label needs the "1a"
     / "1b" suffix a CSS counter cannot produce. Suppress the counter-driven label
     and put the number on each swappable caption instead, via the same attr()
     mechanism as .audio-comparison-figure[data-figure-number] in blog-post.css.
     Every other caption on the post uses the site-wide pseudo-element. */
  #main.post article.content .small-efficiency-figure-caption::before {
    content: none;
  }

  #main.post article.content .se-cap[data-figure-number]::before {
    content: "Figure " attr(data-figure-number) ": ";
    font-weight: 500;
  }

  #main.post article.content .small-efficiency-switcher {
    position: relative;
  }

  /* Axis toggle — inkling-post demo-tabs style (pill row + sliding indicator). */
  /* Symmetric block margin: the three-value shorthand here used to zero the
     bottom, and since paragraphs carry no top margin the caption collided with
     the following copy. */
  #main.post article.content .small-efficiency-switcher { margin: 2.2rem 0; }
  #main.post article.content .se-toggle-row { align-items: center; display: flex; flex-direction: column; gap: 0.55rem; justify-content: center; margin-bottom: 1.4rem; }
  #main.post article.content .small-efficiency-switcher .demo-tabs { --demo-tab-indicator-opacity: 0; --demo-tab-width: 0px; --demo-tab-height: 0px; --demo-tab-x: 0px; --demo-tab-y: 0px; align-items: center; display: inline-flex; gap: 0.45rem; isolation: isolate; justify-content: center; position: relative; }
  #main.post article.content .small-efficiency-switcher .demo-tabs::before { background: color-mix(in srgb, var(--fg) 10%, var(--bg) 90%); border-radius: 999px; content: ""; height: var(--demo-tab-height); left: 0; opacity: var(--demo-tab-indicator-opacity); pointer-events: none; position: absolute; top: 0; width: var(--demo-tab-width); transform: translate3d(var(--demo-tab-x), var(--demo-tab-y), 0); z-index: 0; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), width 240ms cubic-bezier(0.22, 1, 0.36, 1), height 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease; }
  #main.post article.content .small-efficiency-switcher .demo-tab { appearance: none; background: transparent; border: 0; border-radius: 999px; color: var(--fg2); cursor: pointer; font-family: var(--font-sans); font-size: 15px; font-weight: 400; line-height: 1; padding: 0.62rem 0.9rem; position: relative; z-index: 1; }
  #main.post article.content .small-efficiency-switcher .demo-tab:hover, #main.post article.content .small-efficiency-switcher .demo-tab:focus-visible { background: color-mix(in srgb, var(--fg) 7%, var(--bg) 93%); }
  #main.post article.content .small-efficiency-switcher .demo-tab[aria-selected="true"] { background: color-mix(in srgb, var(--fg) 10%, var(--bg) 90%); color: var(--fg); }
  #main.post article.content .small-efficiency-switcher .demo-tabs.demo-tabs-enhanced .demo-tab[aria-selected="true"] { background: transparent; }
  #main.post article.content .se-panel[hidden], #main.post article.content .se-cap[hidden] { display: none; }
  /* Break the whole switcher out of the reading column and center it in the
     viewport, then force the chart to actually fill that width.

     1280px, not the 1171px the other figures use, because this figure is a real
     <figure> element and the others are <div>s inside one. blog-post.css guards
     figures below 1280 with

       @media (max-width: 1279px) {
         #main.post article.content figure:not(.half-width) {
           width: 100%; max-width: 100%; transform: none;
         }
       }

     which outweighs the selector below (same ids and classes, one more element),
     so between 1171 and 1279 it stripped the width and the translateX while
     leaving left: 50% behind -- shunting the figure half the reading column to
     the right and ~69px off the viewport. Starting the breakout where the guard
     ends is what keeps the two from disagreeing. Below it the figure sits in the
     column and .ce-scroll scrolls, exactly as it does on a phone. */
  @media (min-width: 1280px) {
    #main.post article.content .small-efficiency-switcher {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: min(1200px, 100vw - 48px);
      max-width: none;
      margin-left: 0;
      margin-right: 0;
    }

    /* Only at the breakout does the chart stretch to fill the wider box. Below it
       the figure's own min-width has to survive, or the three panels squeeze to
       the viewport instead of scrolling -- which shrank the axis type to ~5px on a
       phone. Scoping these to the breakout is what lets .ce-scroll scroll, the
       same way the Inkling post's effort-curve figure behaves. */
    #main.post article.content .small-efficiency-switcher .ce-scroll,
    #main.post article.content .small-efficiency-switcher .ce-chart,
    #main.post article.content .small-efficiency-switcher .intelligence-interactivity-chart,
    #main.post article.content .small-efficiency-switcher .ce-svg,
    #main.post article.content .small-efficiency-switcher .ce-figure svg { min-width: 0; }
  }
  #main.post article.content .se-panels,
  #main.post article.content .se-panel { width: 100%; }
  #main.post article.content .small-efficiency-switcher .ce-figure { margin: 0 !important; max-width: 100% !important; width: 100% !important; }
  #main.post article.content .small-efficiency-switcher .ce-scroll,
  #main.post article.content .small-efficiency-switcher .ce-chart,
  #main.post article.content .small-efficiency-switcher .intelligence-interactivity-chart { max-width: none; width: 100%; margin: 0; }
  #main.post article.content .small-efficiency-switcher .intelligence-interactivity-legend { max-width: 860px; margin-left: auto; margin-right: auto; }
  #main.post article.content .small-efficiency-switcher .ce-svg,
  #main.post article.content .small-efficiency-switcher .ce-figure svg { width: 100%; height: auto; }
  #main.post article.content .small-efficiency-figure-caption { max-width: 660px; margin-left: auto; margin-right: auto; }
