/* Mobile source dialog; reading.js moves the source column into it. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

dialog.source-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  height: 62vh;
  max-height: 92vh;
  padding: 0;
  border: none;
  border-top: 1px solid var(--rule);
  background: var(--desk);
  color: var(--ink);
  overflow: hidden;
}
dialog.source-sheet[open] { display: flex; flex-direction: column; }
dialog.source-sheet.full { height: 92vh; }
dialog.source-sheet::backdrop { background: rgba(32, 28, 24, .38); }

.sheet-grip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: .5rem var(--margin) .7rem;
  border-bottom: 1px solid var(--rule);
  background: var(--desk);
}
.sheet-height {
  grid-column: 2;
  justify-self: center;
  order: -1;
  grid-row: 1;
  background: none; border: none; padding: .5rem 1.4rem; cursor: pointer;
}
.sheet-rule {
  display: block; width: 2.6rem; height: 3px;
  background: var(--rule); border-radius: 2px;
}
.sheet-height:hover .sheet-rule { background: var(--ink-far); }
.sheet-mark {
  grid-column: 1 / -1; grid-row: 2;
  margin: 0;
  font-family: var(--apparatus);
  font-size: .72rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--verdigris);
}
.sheet-close {
  grid-column: 3; grid-row: 2;
  justify-self: end;
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
  color: var(--ink-quiet);
  padding: 0 .2rem;
}
.sheet-close:hover { color: var(--gold); }
.sheet-content { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.sheet-content .source-column { border: none; }
.sheet-content .source-column-inner { padding: var(--air) var(--margin) calc(var(--air) * 2); max-width: none; }