/* Optional desktop density proposal. Load last on whisperdex.html and vikypedia.html.
   No fixed page height, hidden copy or inner scroll areas: long translations may grow. */
.book77-sidebar-details { display: none; }
@media (min-width: 1001px) {
  .whisperdex,
  .vikypedia-book77 {
    max-width: 1380px;
    padding: 12px clamp(24px, 3vw, 44px) 32px;
  }

  .dex-modes,
  .book77-modes { min-height: 36px; margin-bottom: 10px; gap: 26px; }
  .dex-modes a,
  .book77-modes a { min-height: 36px; font-size: 14px; }
  .whisperdex { overflow-anchor: none; }

  .dex-intro { grid-template-columns: .7fr 1.3fr; gap: 28px; margin-bottom: 8px; }
  .dex-intro h1 { font-size: 36px; }
  .dex-intro p { max-width: 70ch; font-size: 14px; line-height: 1.5; }
  .dex-tools { gap: 16px; }
  .dex-tools label { flex-basis: 280px; gap: 4px; font-size: 12px; }
  .dex-tools input,
  .dex-tools select { height: 40px; padding-block: 8px; font-size: 14px; }
  .dex-tools > p { padding-bottom: 9px; }
  .dex-spoilers { max-width: none; margin: 6px 0 12px; line-height: 1.5; }

  .dex-layout { grid-template-columns: 164px minmax(0, 1fr); gap: 20px; }
  .dex-index :is(button,a[data-entry]) { min-height: 44px; gap: 10px; padding: 5px 8px; font-size: 13px; }
  .dex-index .dex-thumb { width: 34px; height: 34px; }
  .dex-index .dex-thumb.design-pixel-window { height: auto; }
  .dex-record { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .dex-portrait {
    --dex-pixel-slot: 44px;
    padding: 16px 20px 12px;
    row-gap: 8px;
    align-self: stretch;
  }
  .dex-art-stage {
    width: min(100%, clamp(210px, calc((100dvh - 480px) * .7513), 300px));
  }
  .dex-pixel-preview { width: 48px; }
  .dex-portrait figcaption { min-height: 0; font-size: 11px; line-height: 1.45; }
  .dex-details { padding: 18px 24px 12px; }
  .dex-details h2 { font-size: 34px; margin-bottom: 10px; }
  .dex-description { max-width: 58ch; font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
  .dex-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .dex-facts > div + div { margin: 0; }
  .dex-facts > div:last-child { grid-column: 1 / -1; }
  .dex-facts dt { font-size: 12px; margin-bottom: 3px; }
  .dex-facts dd { font-size: 14px; line-height: 1.5; }
  .dex-source { margin-top: 14px; padding-top: 10px; font-size: 12px; line-height: 1.5; }
  .dex-source > p { margin-bottom: 2px; }
  .dex-book-link { min-height: 40px; }
  .dex-step { margin-inline: 20px; padding-block: 3px; }
  .dex-step button { min-height: 40px; }

  /* Fit the complete binding to the available height; metadata stays beside it. */
  .vikypedia-book77 {
    --compact-book-width: clamp(600px, calc((100dvh - 190px) * 1.3333), 1040px);
    padding-bottom: 20px;
    max-width: calc(var(--compact-book-width) + 324px);
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }
  .book77-modes { grid-column: 1; grid-row: 1; gap: 20px; }
  .book77-intro { grid-column: 1; grid-row: 2; padding-top: 6px; }
  .vikypedia-book77 h1 { font-size: 34px; }
  .book77-intro > p { margin-top: 10px; font-size: 13px; line-height: 1.5; max-width: 34ch; }
  .book77-tools { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .book77-tools label { gap: 6px; }
  .book77-tools select { min-height: 42px; font-size: 14px; }
  .book77-tools > p { font-size: 12px; line-height: 1.6; max-width: 40ch; }
  .book77-reader {
    grid-column: 2;
    grid-row: 1 / 6;
    margin: 0;
    width: min(100%, var(--compact-book-width));
    justify-self: center;
  }
  .book77-help { font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
  .book77-turner { position: relative; top: auto; min-height: 44px; padding: 0; margin-bottom: 10px; gap: 8px; }
  .book77-turner button { font-size: 13px; min-height: 44px; gap: 4px; }
  .book77-turner > p { font-size: 12px; }
  .book77-spread { grid-template-rows: auto; padding: 8px; }
  .book77-spread figcaption { display: none; }
  .book77-sidebar-details { display: grid; grid-column: 1 / -1; grid-row: 6; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
  .book77-sidebar-caption + .book77-sidebar-caption .book77-name { display: none; }
  .book77-sidebar-caption .book77-name,
  .book77-sidebar-caption .book77-kind { color: var(--text); }
  .book77-sidebar-caption .book77-source,
  .book77-sidebar-caption .book77-original { color: var(--muted); }
  .book77-sidebar-caption .book77-entry { color: var(--gold); }
  .vikypedia-book77 .book77-name { font-size: 24px; margin-bottom: 3px; }
  .book77-kind { font-size: 12px; margin-bottom: 2px; }
  .book77-source,
  .book77-original { font-size: 12px; line-height: 1.4; }
  .book77-entry { min-height: 40px; margin-top: 3px; font-size: 13px; gap: 8px; }
  .book77-index { grid-column: 1; grid-row: 4; margin-top: 12px; }
  .book77-index ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding-block: 12px 0; overflow: visible; }
  .book77-index button { min-height: 36px; padding: 5px 2px; gap: 5px; font-size: 12px; }
  html[data-theme="light"] .book77-index button { padding-inline: 2px; }
  .book77-index button span:first-child { font-size: 10px; }
  .book77-enlarge { padding: 5px 6px; font-size: 11px; }
}

/* Laptop and desktop: use the two margins for navigation and source details.
   The entire reading workspace fits vertically; the binding keeps its size. */
@media (min-width: 1180px) {
  .vikypedia-book77 {
    max-width: calc(var(--compact-book-width) + 552px);
    grid-template-columns: 208px minmax(0,1fr) 208px;
    column-gap: 24px;
  }
  .book77-sidebar-details {
    grid-column: 3;
    grid-row: 1 / 6;
    grid-template-columns: 1fr;
    margin-top: 0;
    padding: 8px 0 0 18px;
    border-top: 0;
    border-left: 1px solid var(--line);
    gap: 20px;
  }
  .book77-sidebar-caption .book77-entry { min-height: 44px; }
  .book77-sidebar-caption:first-child .book77-name { margin-bottom: 14px; }
}