/* bitflow reads the book's `--color-brand`, `--color-background`, `--color-text`
   and `--color-text-deactivated` itself. Its derived tokens are resolved on
   `:root` from its own green, though, so the rest of the primary family is
   re-declared here from the book's brand; dark.css repeats the half that runs
   the other way. */
.directive-bitflow {
  --bitflow-color-primary-dark: color-mix(in srgb, var(--color-brand), black 30%);
  --bitflow-color-primary-light: color-mix(in srgb, var(--color-brand) 30%, white);
  --bitflow-color-on-primary: var(--color-brand-text);
  --bitflow-shadow-outline: 0 0 0 3px
    color-mix(in srgb, var(--color-brand) 40%, transparent);
  /* Reserves room in bitflow's own controls bar for the reset button this
     stylesheet draws in the bottom right corner, so Next never sits under
     it. 32px of button plus the 8px it sits off the edge. */
  --bitflow-controls-inset-end: 40px;
  /* Same stack as `.hyperbook-markdown`, so the flow matches the page. */
  --bitflow-font-family: hyperbook-body, sans-serif;
  font-family: hyperbook-body, sans-serif;
  position: relative;
  border: 1px solid var(--color-nav-border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 300px;
  /* The directive emits the author's `height`/`maxHeight` as custom
     properties rather than as these two properties directly, so they can be
     capped here rather than trusted as-is: an inline `height: 820px` outranks
     any stylesheet rule short of `!important`, but reading it back out of a
     variable does not. `--bitflow-height` is unset — falling through to
     `auto` — when the author wrote `height="auto"`, so the box still grows
     with the step by default. */
  height: var(--bitflow-height, auto);
  /* Never taller than the viewport under the book's sticky header, on top of
     whatever cap the author asked for: a phone-height `100dvh` still leaves
     the flow's Next button under the fold when `height` is a desktop-sized
     fixed pixel value, since that path never looks at `maxHeight` at all.
     `100dvh` accounts for a mobile browser's collapsing address bar the way
     plain `vh` does not. `--header-height` is hyperbook's own token, set in
     the page's root style; the fallback is only for a page built before it
     existed. */
  max-height: min(
    var(--bitflow-max-height, 100dvh),
    calc(100dvh - var(--header-height, 3.75rem))
  );
  /* A column, so the flow fills the height above and stops at the max-height
     alike; bitflow stretches its shell down the element the same way. */
  display: flex;
  flex-direction: column;
}

/* Native controls do not inherit the font unless told to. */
.directive-bitflow button,
.directive-bitflow input,
.directive-bitflow select,
.directive-bitflow textarea {
  font-family: inherit;
}

.directive-bitflow bitflow-flow {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* Before the module defining it has run, an unupgraded custom element is an
   inline box of nothing. Without this the container collapses and the page
   reflows once the flow appears. */
.directive-bitflow bitflow-flow:not(:defined) {
  display: block;
  width: 100%;
  flex: 1 1 auto;
}

/* Bottom right: the flow puts its progress bar top and Check/Back/Next in a
   bar along the bottom edge, so the corner is the one spot left free.
   `--bitflow-controls-inset-end` above tells that bar to keep clear of a
   32px button here; `bottom: 14px` centres it on the ~60px bar rather than
   sitting flush with its bottom edge. */
.directive-bitflow .buttons {
  position: absolute;
  right: 8px;
  bottom: 14px;
  display: flex;
  z-index: 5;
}

/* A fallback for a book running an older published `@bitflow/web-component`
   that has no `--bitflow-controls-inset-end` in its controls bar to read:
   this pushes Next clear of the reset button directly, the same 40px. Safe
   to drop once the minimum supported bundle carries the variable — the two
   would then simply agree. */
.directive-bitflow .bitflow-shell-controls {
  padding-inline-end: calc(var(--bitflow-space-small, 16px) + 40px);
}

.directive-bitflow .buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background-color: var(--bitflow-color-surface, #ffffff);
  color: var(--bitflow-color-text, #242428);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  cursor: pointer;
}

.directive-bitflow .buttons button:hover {
  background-color: var(--bitflow-color-neutral-100, #f5f5f5);
}

.directive-bitflow .buttons button .icon {
  width: 18px;
  height: 18px;
  display: block;
}