/* Folio v0.7.1 — 見開き右ページのお気に入りドック */
:root {
  --dock-paper: #f3ecd9;
  --dock-paper-deep: #e4d7bb;
  --dock-ink: #2f3932;
  --dock-moss: #526b5a;
  --dock-russet: #985d43;
  --dock-line: rgba(65, 75, 65, .2);
}

.right-lower-controls { display: none; }

.favorite-page-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.favorite-page-switch button {
  padding: 6px 5px;
  line-height: 1.35;
}

.favorite-page-switch button.is-active {
  color: #fffaf0;
  background: var(--dock-moss);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 3px 8px rgba(46,58,49,.18);
}

body.dark .favorite-page-switch {
  border-color: rgba(85,70,49,.3);
  background: #d9cfb9;
}

body.dark .favorite-page-switch button { color: #3b443d; }
body.dark .favorite-page-switch button.is-active { color: #fffaf0; background: var(--dock-moss); }

.favorite-shelf-grid[data-zone="switch"] {
  grid-template-columns: minmax(132px, 190px);
}

.favorite-shelf-grid[data-zone="switch"] .favorite-position { min-height: 112px; }
.right-grid-settings[hidden] { display: none !important; }

@media (min-width: 840px) {
  .home-view .right-page {
    grid-template-rows: 6.5% minmax(0, 48.5%) minmax(0, 26%) minmax(96px, 16%);
    gap: 1%;
  }

  .home-view .right-page > .right-lower-controls {
    grid-row: 4;
    position: relative;
    z-index: 22;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 29px minmax(0, 1fr);
    padding-right: 72px;
    border-top: 1px solid var(--dock-line);
    background:
      linear-gradient(90deg, rgba(152,93,67,.07), transparent 34%),
      rgba(248,243,229,.42);
  }

  .home-view .right-page .right-page-mode-switch {
    position: static;
    justify-self: end;
    align-self: start;
    display: grid;
    grid-template-columns: auto auto minmax(74px, auto);
    max-width: min(100%, 310px);
    padding: 2px;
    transform: translateY(-1px);
    border: 1px solid var(--dock-line);
    background: rgba(246,239,218,.9);
    box-shadow: 0 3px 8px rgba(54,40,25,.08);
  }

  .home-view .right-page .right-page-mode-switch button {
    min-width: 46px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 8px;
    overflow: hidden;
    color: var(--dock-ink);
    font: 9px/1.1 var(--display);
    white-space: nowrap;
  }

  .home-view .right-page .right-page-mode-switch button.is-active {
    color: #fffaf0;
    background: var(--dock-moss);
  }

  .right-page-mode-switch #rightModeAppButton {
    color: var(--dock-russet);
    border-left: 1px solid var(--dock-line);
  }

  .right-page-mode-switch #rightModeAppButton > span:last-child {
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .right-page-mode-switch .right-mode-app-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    margin: 0;
    border-width: 1px;
    border-radius: 5px;
    font-size: 8px;
    box-shadow: none;
  }

  .spread-app-dock {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: clamp(4px, .7vw, 10px);
    padding: 4px 8px 3px;
  }

  .spread-app-dock button {
    min-width: 0;
    min-height: 61px;
    display: grid;
    grid-template-rows: 48px 12px;
    place-items: center;
    align-content: end;
    padding: 0 2px;
    border: 0;
    color: var(--dock-ink);
    background: transparent;
    transition: transform .13s ease, background-color .13s ease;
  }

  .spread-app-dock button:active { transform: translateY(2px) scale(.96); }
  .spread-app-dock button:focus-visible { outline: 2px solid var(--dock-russet); outline-offset: 2px; }

  .spread-app-dock .app-tile,
  .spread-home-icon {
    width: clamp(46px, 3.8vw, 54px) !important;
    height: clamp(46px, 3.8vw, 54px) !important;
    margin: 0;
    border-radius: 14px 14px 9px 9px;
  }

  .spread-home-icon {
    display: grid;
    place-items: center;
    color: #f8f1df;
    border: 2px solid rgba(255,255,255,.68);
    background: linear-gradient(145deg, #6f826d, #455b4d);
    box-shadow: 0 4px 7px rgba(46,53,49,.2);
  }

  .spread-home-icon svg { width: 24px; height: 24px; stroke-width: 1.65; }

  .spread-app-dock small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--dock-ink);
    font: 7px/1 var(--utility);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .spread-app-dock .spread-dock-empty .app-tile {
    color: var(--dock-moss);
    border: 1px dashed rgba(82,107,90,.4);
    background: rgba(255,252,242,.4);
    box-shadow: none;
  }

  .right-apps-panel {
    inset: 48px 20px 124px;
  }
}

@media (min-width: 840px) and (max-height: 720px) {
  .home-view .right-page {
    grid-template-rows: 6.5% minmax(0, 49%) minmax(0, 24%) minmax(86px, 17.5%);
  }

  .home-view .right-page > .right-lower-controls {
    grid-template-rows: 26px minmax(0, 1fr);
  }

  .spread-app-dock { padding-top: 1px; }
  .spread-app-dock button { min-height: 53px; grid-template-rows: 41px 10px; }
  .spread-app-dock .app-tile,
  .spread-home-icon { width: 41px !important; height: 41px !important; border-radius: 12px 12px 8px 8px; }
  .right-apps-panel { bottom: 108px; }
}

@media (max-width: 839px) {
  .right-lower-controls { display: none !important; }
  .favorite-page-switch button { min-height: 42px; }
}

@media (max-width: 520px) {
  .favorite-page-switch button { font-size: 8px; }
  .favorite-shelf-grid[data-zone="dock"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .spread-app-dock button { transition: none; }
}