@charset "UTF-8";
/*! DEARFLIP view switcher styles — for the addon dflip-view-switcher.js
   (view-mode buttons and the Right to left / 3D cover / Vertical mode
   settings for a flipbook). Neutral on purpose: every rule is a df-vs-
   class, so a theme overrides it with its own one-class rule.

   Static file, like dflip-boot.css: copied to build/dflip-view-switcher/css
   by gulp, no scss build. */

.df-vs {
  font-size: 13px;
  line-height: 1.3;
  color: #555;
  text-align: center;
  padding: 12px 0 0;
}

.df-vs-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.df-vs-mode {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font: inherit;
  color: #555;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 18px;
  cursor: pointer;
}

/* The modes' icons: line art in currentColor (the button's colour, active
   too). In the row under a book they sit small before the name; the side
   column (.df-vs-layout-side, below) makes the modes tiles. */
.df-vs-icon {
  flex: 0 0 auto;
  line-height: 0;
}

.df-vs-icon svg {
  display: block;
  width: auto;
  height: 18px;
}

.df-vs-mode {
  gap: 6px;
}

.df-vs-mode:hover {
  color: #222;
  border-color: #aaa;
}

/* The book's current mode. Set on every trigger of that book, generated or
   hand-written. */
.df-vs-active,
.df-vs-mode.df-vs-active {
  color: #fff;
  background: #0085ba;
  border-color: #0085ba;
}

.df-vs-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  padding: 10px 0 0;
}

.df-vs-setting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.df-vs-setting input {
  margin: 0;
  cursor: pointer;
  accent-color: #0085ba;
}

/* A setting with choices (the Reader's page fit): its name, then a dropdown. */
.df-vs-setting select {
  padding: 2px 4px;
  font: inherit;
  color: inherit;
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  cursor: pointer;
}

/* ---- The pickers (background, document) ------------------------------------
   Plain dropdowns after jQuery UI's selectmenu (custom rendering): a caption,
   a select-like button with an arrow on the right, and a list that opens
   UPWARD AND TO THE LEFT (owner, v2.5.174) — its right edge on the button's,
   so it grows away from the arrow; the switcher sits under the book, and
   below it is often the page's end. A hidden native <select> holds the value
   and fires the change. .df-vs-bg and .df-vs-doc give each its look. */
.df-vs-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.df-vs-picker-control {
  position: relative;
}

.df-vs-picker-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.df-vs-picker-current {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  padding: 2px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  cursor: pointer;
}

.df-vs-picker-current:hover,
.df-vs-open .df-vs-picker-current {
  border-color: #999;
}

.df-vs-caret {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
}

/* The arrow points the way the list opens — up — and down while it is open. */
.df-vs-caret:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3px 0 0 -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid #555;
}

.df-vs-open .df-vs-caret:after {
  margin-top: -2px;
  border-bottom: 0;
  border-top: 5px solid #555;
}

.df-vs-picker-list {
  display: none;
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 4px);
  right: 0;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #c5c5c5;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.df-vs-open .df-vs-picker-list {
  display: block;
}

.df-vs-picker-option {
  display: block;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.df-vs-picker-option:hover,
.df-vs-picker-option:focus-visible {
  border-color: #999;
  outline: none;
}

.df-vs-picker-option.df-vs-active {
  border-color: #0085ba;
}

/* ---- The background picker: SQUARE BOXES IN THREE COLUMNS (owner, v2.5.174:
   "wide background doesn't look good, make it boxes of 3 columns"). Button
   and boxes are FILLED with their background — no text, the name is the
   tooltip. */
.df-vs-picker-current .df-vs-bg-swatch {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.df-vs-open.df-vs-bg .df-vs-picker-list {
  display: grid;
  grid-template-columns: repeat(3, 68px);
  gap: 8px;
}

.df-vs-bg .df-vs-picker-option {
  width: 68px;
  height: 68px;
}

.df-vs-picker-option .df-vs-bg-swatch {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ---- The documents list: no dropdown — "Open PDF file…" on top, a heading,
   then the page's own thumbs (its .df-vs-documents), always open. It fills
   the width it is given (the 250px column beside the book) and scrolls
   inside a parent with a set height. */
.df-vs-doc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100%;
  font-size: 13px;
  color: #555;
  text-align: left;
}

.df-vs-doc-open {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: #0085ba;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.df-vs-doc-open:hover,
.df-vs-doc-open:focus-visible {
  background: #006f9b;
  outline: none;
}

.df-vs-doc .df-vs-picker-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}

.df-vs-doc .df-vs-picker-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: static;
  width: 100%;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* A document is the page's DEARFLIP THUMB (owner, v2.5.177: "follow our
   thumb format and looks") — the library's .df-popup-thumb styles size and
   draw it, one per row; the document shown is marked by a ring round the
   book. */
.df-vs-doc .df-popup-thumb {
  flex: 0 0 auto;
  /* the library's thumb margin (30px 15px 15px) carries !important too */
  margin: 10px !important;
}

/* the generic .df-vs-active fill is for the mode buttons — not a thumb */
.df-vs-doc .df-popup-thumb.df-vs-active {
  color: inherit;
  background: none;
}

.df-vs-doc .df-popup-thumb.df-vs-active .df-book-wrapper {
  outline: 3px solid #0085ba;
  outline-offset: 3px;
}

/* The fill: the background's colour, its image over it, cover-sized. */
.df-vs-bg-swatch {
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-size: cover;
  background-position: 50%;
}

/* No colour of its own (transparent, or the book's own before the book is
   seen): a light checkerboard. */
.df-vs-bg-swatch.df-vs-bg-default {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e2e2e2 25%, transparent 25%, transparent 75%, #e2e2e2 75%),
  linear-gradient(45deg, #e2e2e2 25%, transparent 25%, transparent 75%, #e2e2e2 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

/* A setting the current mode cannot carry, and a settings row with none
   left. Also applied to hand-written triggers, hence the !important. */
.df-vs-hidden {
  display: none !important;
}

/* ---- The layout: THREE COLUMNS (owner, v2.5.174: "options to left and pdf
   document options to right", with icons) — on the left, 250px (200 until
   v2.5.177), the modes as tiles in two columns (icon on top, name under it)
   and the settings one per row; the book; on the right, 250px, the
   documents list. The WordPress
   [dflip-switcher] shortcode's markup, open to any page:
     .df-vs-layout > .df-vs-layout-side.df-vs-layout-options
                       > .df-vs-layout-side-inner > the switcher's container
                   + .df-vs-layout-book (the book)
                   + .df-vs-layout-side.df-vs-layout-documents
                       > .df-vs-layout-side-inner (the documentsTarget)
   Each column is as tall as the book (its content sits absolute inside it,
   so it adds no height); the options scroll if they ever outgrow it, the
   documents list scrolls in its own. On a phone: the book, the options,
   the documents, stacked. */
.df-vs-layout {
  display: flex;
  gap: 0;
  align-items: stretch;
  /* WIDER THAN THE THEME'S CONTENT COLUMN, CENTRED ON IT: the viewport's
     width up to 1600px, pulled left by half the overflow — the parent's
     half (50%) less the layout's half (800 = 1600 / 2, change both
     together); the padding sits inside that width (border-box). Margins,
     not a transform: a transformed ancestor would re-anchor fixed-positioned
     elements inside the book. */
  width: min(100vw, 1600px);
  margin-left: calc(50% - min(50vw, 800px));
  padding: 10px;
  box-sizing: border-box;
}

.df-vs-layout-book {
  flex: 1 1 auto;
  min-width: 0;
}

.df-vs-layout-side {
  position: relative;
  flex: 0 0 250px;
  /* QUIET UNTIL WANTED (owner, v2.5.174: "the options are like a
     distraction"): each side column faded, full on hover only (owner:
     "just use hover" — the focus rule went); its shaded panel shows on
     hover too, transparent otherwise (owner, v2.5.177) */
  opacity: 0.25;
  background: transparent;
  transition: opacity 0.2s, background-color 0.2s;
}

.df-vs-layout-side:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.03);
}

.df-vs-layout-side-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}

/* the chain down to the documents list: each level a column that may
   shrink, so the list is what scrolls */
.df-vs-layout-side-inner > *,
.df-vs-layout-side .df-vs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.df-vs-layout-side .df-vs {
  gap: 14px;
  padding: 0;
  text-align: left;
}

.df-vs-layout-options .df-vs-layout-side-inner {
  overflow-y: auto;
}

/* a column's title: "ViewMode Options", "Document Options" */
.df-vs-layout-side-inner > .df-vs-layout-title {
  flex: 0 0 auto;
  margin: 0 0 10px;
  font-weight: bold;
  line-height: 1.3;
  color: #333;
  text-align: center;
}

.df-vs-layout-side .df-vs-doc {
  flex: 1 1 auto;
  min-height: 0;
}

.df-vs-layout-side .df-vs-modes,
.df-vs-layout-side .df-vs-settings {
  flex: 0 0 auto;
}

/* the modes: equal tiles, two columns */
.df-vs-layout-side .df-vs-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 6px;
}

.df-vs-layout-side .df-vs-mode {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  border-radius: 6px;
}

.df-vs-layout-side .df-vs-mode .df-vs-icon svg {
  height: 30px;
}

/* the settings: one per row */
.df-vs-layout-side .df-vs-settings {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  padding: 0;
}

.df-vs-layout-side .df-vs-setting {
  gap: 8px;
}

.df-vs-layout-side .df-vs-setting select {
  min-width: 0;
  margin-left: auto;
}

@media (max-width: 640px) {
  .df-vs-layout {
    flex-direction: column;
  }

  .df-vs-layout-side {
    flex: none;
  }

  /* the book first, then the options, then the documents */
  .df-vs-layout-book {
    order: -1;
  }

  .df-vs-layout-side-inner {
    position: static;
  }

  .df-vs-layout-side .df-vs-modes {
    grid-template-columns: repeat(3, 1fr);
  }

  .df-vs-layout-side .df-vs-doc {
    max-height: 320px;
  }
}