/* Folio v0.8.5 — v0.8.2の紙面を保った右端付箋ナビ */
:root {
  --folio-tab-orange: #e8bf86;
  --folio-tab-green: #cbd9a8;
  --folio-tab-blue: #b6dce8;
  --folio-tab-pink: #edb4ad;
  --folio-tab-purple: #cbbbd8;
}

.folio-edge-tabs { display: none; }

@media (min-width: 840px) {
  .home-view .right-page {
    grid-template-rows: minmax(0, 61%) minmax(0, 1fr) !important;
  }

  .home-view .right-page > .right-lower-controls { display: none !important; }
  .page-turn-right { display: none !important; }

  .folio-edge-tabs {
    position: fixed;
    z-index: 420;
    top: max(76px, calc(env(safe-area-inset-top) + 66px));
    right: max(0px, env(safe-area-inset-right));
    display: grid;
    gap: 2px;
  }

  .folio-edge-tabs button {
    width: 32px;
    height: 68px;
    padding: 7px 7px 5px;
    border: 1px solid rgba(74, 61, 45, .2);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    color: #4b493f;
    box-shadow: -3px 3px 7px rgba(61, 47, 32, .13);
    font: 500 8px/1.12 var(--display);
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transition: width 140ms ease, transform 140ms ease, filter 140ms ease;
  }

  .folio-edge-tabs button:nth-child(1) { background: var(--folio-tab-orange); }
  .folio-edge-tabs button:nth-child(2) { background: var(--folio-tab-green); }
  .folio-edge-tabs button:nth-child(3) { background: var(--folio-tab-blue); }
  .folio-edge-tabs button:nth-child(4) { background: var(--folio-tab-pink); }
  .folio-edge-tabs button:nth-child(5) { background: var(--folio-tab-purple); }

  .folio-edge-tabs button:is(:hover, :focus-visible) {
    width: 38px;
    filter: saturate(1.06);
    outline: 2px solid rgba(74, 61, 45, .32);
    outline-offset: -2px;
  }

  .folio-edge-tabs button.is-active {
    width: 39px;
    transform: translateX(-1px);
    box-shadow: -5px 4px 9px rgba(61, 47, 32, .2);
  }

  .detail-view.is-active { padding-right: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-edge-tabs button { transition: none; }
}