/* The cover band (.bbflip-band) and the page bookmark (.bb-book-ribbon).
   The band is the opening book's ribbon: 8.2% by 114% on a 220:300 board,
   forked at 96.5%. The bookmark is the marketing header's "Get started"
   ribbon, measured on that button: 101px wide when its padding is 12px
   (viewport <= 640), 109px when the padding is 16px, 44px tall at 375,
   390, and 1280 (the border box; the 9px notch is cut into it), and the
   same vertical ox. It is a corner accent. It does not animate. */

:root {
  --bb-ribbon-ox: oklch(0.47 0.13 32);
  --bb-ribbon-ox-d: oklch(0.41 0.12 32);
  --bb-ribbon-band-width: 8.2;
  --bb-ribbon-band-height: 114;
  --bb-ribbon-fork-pct: 3.5;
  --bb-ribbon-board-w: 220;
  --bb-ribbon-board-h: 300;
  --bb-ribbon-fork-ratio: calc(
    var(--bb-ribbon-fork-pct) / 100
    * var(--bb-ribbon-band-height) / var(--bb-ribbon-band-width)
    * var(--bb-ribbon-board-h) / var(--bb-ribbon-board-w)
  );
}

.bbflip-band {
  position: absolute;
  z-index: 2;
  top: -2%;
  right: 18%;
  width: 8.2%;
  height: 114%;
  background: linear-gradient(90deg, #7f2a1c, #963828);
  background: linear-gradient(
    90deg,
    var(--bbflip-ox-d, var(--bb-ribbon-ox-d)),
    var(--bbflip-ox, var(--bb-ribbon-ox))
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 96.5%, 0 100%);
  pointer-events: none;
}

.bb-book-ribbon {
  --bb-bookmark-w: 101px;
  --bb-bookmark-h: 44px;
  --bb-cta-notch: 9px;
  position: absolute;
  z-index: 2;
  top: -8px;
  right: 12px;
  width: var(--bb-bookmark-w);
  height: var(--bb-bookmark-h);
  background: linear-gradient(180deg, #963828, #7f2a1c);
  background: linear-gradient(
    180deg,
    var(--ox, var(--bb-ribbon-ox)),
    var(--ox-d, var(--bb-ribbon-ox-d))
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--bb-cta-notch)), 0 100%);
  pointer-events: none;
}

@media (min-width: 641px) {
  .bb-book-ribbon { --bb-bookmark-w: 109px; }
}

/* The same bookmark when it is the action, not the corner accent.
   The notch, ox, and height stay on .bb-book-ribbon. A link has to sit
   in the page and take a click, and the label can be wider than 101px. */
a.bb-book-ribbon {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: var(--bb-bookmark-w);
  height: var(--bb-bookmark-h);
  padding: 0 16px 9px;
  pointer-events: auto;
  border-radius: 0;
  color: var(--ds-book-on-leather, #f3ece2);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
a.bb-book-ribbon:hover {
  background: var(--bb-ribbon-ox-d);
  color: var(--ds-book-on-leather, #f3ece2);
}
a.bb-book-ribbon:focus-visible {
  outline: 2px solid var(--bb-ribbon-ox);
  outline-offset: 2px;
}

/* The same bookmark on a button. Export my data is one. The notch and the
   ox stay on .bb-book-ribbon. A button has to sit in the page, take a
   click, and drop the native border that would square the ribbon off. */
button.bb-book-ribbon {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: var(--bb-bookmark-w);
  height: var(--bb-bookmark-h);
  padding: 0 16px 9px;
  pointer-events: auto;
  border: 0;
  border-radius: 0;
  appearance: none;
  color: var(--ds-book-on-leather, #f3ece2);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
button.bb-book-ribbon:hover {
  background: var(--bb-ribbon-ox-d);
  color: var(--ds-book-on-leather, #f3ece2);
}
button.bb-book-ribbon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.bb-book-ribbon:focus-visible {
  outline: 2px solid var(--bb-ribbon-ox);
  outline-offset: 2px;
}