/* The graph owns the default view; details and group examples are opt-in. */
#reader { align-items: stretch; padding-bottom: 3.5rem; }
#reader #mindmap { flex: 1 1 100%; min-width: 0; }
#reader.dictionary-open #mindmap { flex: 0 0 var(--mindmap-pane-percent); }
#reader #dictionary-card {
  position: relative;
  inset: auto;
  z-index: 12;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: var(--detail-pane-height, calc(100dvh - 10rem));
  max-height: none;
  padding: 0 1.25rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  box-shadow: none;
  font-size: calc(1rem * var(--text-scale, 1));
  line-height: 1.6;
}
.dictionary-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .8rem 0;
  background: var(--theme-background);
  border-bottom: 1px solid var(--theme-divider);
}
#dictionary-close { float: right; min-height: 2.5rem; padding: .25rem .75rem; }
#dictionary-word { font-size: 1.8rem; }
#words .word.dictionary-selected { outline: 3px solid var(--theme-focus); outline-offset: 4px; }
.dictionary-section { padding: .8rem 0; border-bottom: 1px solid var(--theme-divider); }
.dictionary-section h3 { margin: 0 0 .6rem; font-size: 1rem; }
.dictionary-section ul { list-style: none; margin: 0; padding: 0; }
.dictionary-section li + li { margin-top: .75rem; }
.dictionary-section .sense-pos { font-size: .85em; color: var(--theme-focus); }
.dictionary-section .sense-definition, .example-translation { opacity: .8; }
.dictionary-section summary { cursor: pointer; margin-top: .65rem; padding: .35rem 0; }
.dictionary-section details[open] summary { margin-bottom: .65rem; }
.dictionary-jumps { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.dictionary-jumps button {
  border: 1px solid var(--theme-divider);
  border-radius: .4rem;
  padding: .25rem .45rem;
  background: var(--theme-background);
  color: var(--theme-text);
  font: inherit;
  font-size: .8rem;
}
.dictionary-section[data-detail-section="forms"] > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .6rem; }
.dictionary-section[data-detail-section="forms"] li + li { margin-top: 0; }
.dictionary-section[data-detail-section="forms"] li { font-size: .9em; }
#dictionary-card .word-note-preview { margin-top: 1rem; }
#dictionary-card nav { flex-wrap: wrap; }
#dictionary-illustration { max-height: 8rem; }
#dictionary-image { max-height: 8rem; }
#sentence-bar {
  position: fixed;
  bottom: calc(var(--classroom-nav-height) + env(safe-area-inset-bottom) + .6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
}
@media (min-width: 1101px) {
  #sentence-bar {
    bottom: calc(env(safe-area-inset-bottom) + .5rem);
    left: auto;
    right: calc(var(--page-turn-width) + 1rem);
    transform: none;
    z-index: 21;
  }
}
#sentence-bar button, .sentence-drawer-heading button {
  min-height: 2.75rem;
  padding: .4rem 1rem;
  border: 1px solid var(--theme-divider);
  border-radius: 999px;
  background: var(--theme-background);
  color: var(--theme-text);
  font: inherit;
  cursor: pointer;
}
#sentence-bar button { box-shadow: 0 3px 12px #0002; white-space: nowrap; }
#sentence-drawer {
  position: fixed;
  z-index: 22;
  bottom: calc(var(--classroom-nav-height) + env(safe-area-inset-bottom));
  left: var(--page-turn-width);
  right: var(--page-turn-width);
  max-height: min(55dvh, 36rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--theme-divider);
  border-radius: 1rem 1rem 0 0;
  background: var(--theme-background);
  box-shadow: 0 -8px 30px #0002;
}
.sentence-drawer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .6rem 1.25rem;
  background: var(--theme-background);
  border-bottom: 1px solid var(--theme-divider);
}
.sentence-drawer-heading h2 { margin: 0; font-size: 1rem; }
#sentence-drawer #sentences { min-height: 0; border: 0; padding: 1rem 1.5rem; }
#sentence-drawer #sentences p { margin-top: 0; }
@media (max-width: 760px) {
  #reader #mindmap { flex: 0 0 auto; }
  #reader #dictionary-card {
    position: fixed;
    inset: .5rem;
    z-index: 35;
    width: auto;
    height: auto;
    max-height: none;
    padding-inline: 1rem;
    box-shadow: 0 0 0 1rem #0005;
  }
  #reader #pane-divider { display: none; }
  #sentence-drawer { left: .5rem; right: .5rem; }
}