/* Journal controls share one wide row above its entry list and detail page. */
#journalOverlay .journal-window .journal-layout {
  grid-template-rows: auto minmax(0, 1fr);
}

#journalOverlay .journal-layout > .journal-nav {
  grid-column: 1;
  grid-row: 1 / span 2;
}

#journalOverlay .journal-layout > .journal-toolbar {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(190, 156, 91, .24);
}

#journalOverlay .journal-toolbar :is(.journal-search, .journal-catalog-controls) {
  display: contents;
}

#journalOverlay .journal-toolbar input[data-journal-search] {
  flex: 1 1 300px;
  grid-column: auto;
  width: auto;
  min-width: 180px;
  height: 34px;
}

#journalOverlay .journal-toolbar select {
  flex: 0 1 155px;
  width: auto;
  min-width: 110px;
  max-width: 100%;
  height: 34px;
  margin: 0;
}

#journalOverlay .journal-toolbar button {
  flex: 0 0 auto;
  width: auto;
  min-width: 34px;
  min-height: 34px;
  padding: 4px 10px;
  margin: 0;
}

#journalOverlay .journal-layout > .journal-index {
  grid-column: 2;
  grid-row: 2;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: none;
}

#journalOverlay .journal-layout > .journal-page {
  grid-column: 3;
  grid-row: 2;
}

@media (min-width: 851px) and (max-width: 1050px) {
  #journalOverlay .journal-window .journal-layout {
    grid-template-columns: 190px 220px minmax(0, 1fr);
    overflow: hidden;
  }
  #journalOverlay .journal-window .journal-sections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    overflow: visible;
  }
  #journalOverlay .journal-window .journal-section-group.is-active {
    order: initial;
  }
  #journalOverlay .journal-window .journal-section-group.is-active .journal-chapters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 850px) {
  #journalOverlay .journal-window .journal-layout {
    grid-template-columns: minmax(175px, 34%) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  #journalOverlay .journal-layout > .journal-nav {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #journalOverlay .journal-layout > .journal-toolbar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  #journalOverlay .journal-layout > .journal-index {
    grid-column: 1;
    grid-row: 3;
  }
  #journalOverlay .journal-layout > .journal-page {
    grid-column: 2;
    grid-row: 3;
  }
  #journalOverlay .journal-toolbar input[data-journal-search] {
    flex-basis: 100%;
  }
  #journalOverlay .journal-toolbar select {
    flex: 1 1 130px;
  }
}

@media (max-width: 600px) {
  #journalOverlay .journal-window .journal-layout {
    display: flex;
    flex-direction: column;
    flex: none;
    overflow: visible;
  }
  #journalOverlay .journal-window .journal-layout > .journal-nav {
    margin-bottom: 0;
  }
  #journalOverlay .journal-window .journal-layout > .journal-index {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 250px;
    max-height: 250px;
    margin-bottom: 0;
  }
  #journalOverlay .journal-toolbar input[data-journal-search] {
    min-width: 0;
  }
  #journalOverlay .journal-toolbar select {
    min-width: 0;
    flex-basis: calc(50% - 4px);
  }
}