/* Folio v0.7.3 — Folioのページを見開き左側だけで開く */
:root {
  --inline-paper: #f6efdc;
  --inline-ink: #2f3932;
  --inline-moss: #526b5a;
  --inline-russet: #985d43;
  --inline-line: rgba(63, 70, 60, .22);
}

.left-inline-portal[hidden] { display: none !important; }
.folio-page-icon {
  display: grid;
  place-items: center;
  color: #fff9e9;
  background: linear-gradient(145deg, #6f826d, #455b4d);
}
.folio-page-icon svg {
  width: 58%;
  height: 58%;
  stroke-width: 1.45;
}
.folio-page-picker {
  border-left: 3px solid var(--inline-russet) !important;
}

@media (min-width: 840px) {
  .left-inline-portal {
    position: absolute;
    z-index: 44;
    inset: 5px 6px 5px 7px;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 47px minmax(0, 1fr);
    overflow: hidden;
    color: var(--inline-ink);
    border: 1px solid var(--inline-line);
    background:
      repeating-linear-gradient(0deg, transparent 0 30px, rgba(68, 74, 67, .04) 30px 31px),
      var(--inline-paper);
    box-shadow: 0 8px 18px rgba(50, 37, 24, .12);
    animation: folio-left-page-in .18s ease-out both;
  }
  .left-inline-portal-heading {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 5px 8px 6px 10px;
    border-bottom: 1px solid var(--inline-line);
    background: rgba(250, 246, 233, .9);
  }
  .left-inline-portal-heading .eyebrow {
    grid-column: 1;
    align-self: start;
    font-size: 6px;
  }
  .left-inline-portal-heading h2 {
    grid-column: 1;
    min-width: 0;
    margin: -1px 0 0;
    overflow: hidden;
    font: 500 clamp(16px, 1.5vw, 21px)/1.1 var(--display);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .left-inline-portal-heading button {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    padding: 6px 9px;
    color: var(--inline-moss);
    border: 1px solid rgba(82, 107, 90, .28);
    background: rgba(255, 252, 242, .55);
    font: 8px var(--utility);
  }
  .left-inline-portal-frame {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #fffdf7;
  }
  .left-inline-portal-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #fff;
  }
  .left-inline-portal-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 9px;
    color: var(--inline-moss);
    background: var(--inline-paper);
    text-align: center;
    font: 9px var(--utility);
  }
  .left-inline-portal-loading[hidden] { display: none; }
  .left-inline-portal-loading span {
    width: 24px;
    height: 24px;
    justify-self: center;
    border: 2px solid rgba(82, 107, 90, .2);
    border-top-color: var(--inline-moss);
    border-radius: 50%;
    animation: folio-inline-spin .7s linear infinite;
  }

  @keyframes folio-left-page-in {
    from { opacity: .35; transform: translateX(-24px) rotateY(-1.2deg); transform-origin: left center; }
    to { opacity: 1; transform: none; }
  }
  @keyframes folio-inline-spin { to { transform: rotate(360deg); } }
}

@media (max-width: 839px) {
  .left-inline-portal { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .left-inline-portal,
  .left-inline-portal-loading span { animation: none !important; }
}