/* A small set of reading preferences, kept within the essay's own column. */
.reading-room {
  margin: 1.25rem 0 0;
  font: 400 12px/1.6 var(--sans);
  color: var(--text-sec);
  position: relative;
  z-index: 4;
}
/* Keep the closed control on one line, then give its contents the full measure.
   In particular, the panel should not become a narrow right-hand rail on phones. */
.reading-room__bar { position: relative; }
.reading-room__time {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reading-room__settings { width: 100%; }
.reading-room summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  width: fit-content;
  max-width: calc(100% - 84px);
  margin-left: auto;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--text-sec);
}
.reading-room summary::-webkit-details-marker { display: none; }
.reading-room summary::after { content: '+'; flex-shrink: 0; font: 400 17px/1 var(--serif); margin-left: 3px; color: var(--accent); }
.reading-room details[open] summary::after { content: '−'; }
.reading-room__type { flex-shrink: 0; font: 400 18px/1 var(--serif); color: var(--text-sec); }
.reading-room__panel { margin-top: 8px; padding: 20px 0 12px; border-top: 1px solid var(--border); }
.reading-room fieldset { display: flex; gap: 24px; align-items: center; border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.reading-room legend { float: left; padding: 10px 0; margin-right: auto; }
.reading-room__sizes { display: flex; gap: 5px; }
.reading-room button { color: var(--text); font: inherit; cursor: pointer; }
.reading-room__sizes button {
  width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 4px;
  font: 400 19px/1 var(--serif);
}
.reading-room__sizes button:nth-child(2) { font-size: 23px; }
.reading-room__sizes button:nth-child(3) { font-size: 27px; }
.reading-room__sizes button[aria-pressed="true"] { border-bottom-color: var(--accent); color: var(--accent); }
@media (hover: hover) {
  .reading-room__sizes button:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .reading-room summary:hover { color: var(--text); }
}
.reading-room__remember { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); cursor: pointer; }
.reading-room__remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.reading-room__remember:has(input:disabled) { cursor: default; color: var(--text-sec); }
.reading-room__privacy { max-width: 44ch; margin: 4px 0 0; font: 400 12px/1.65 var(--sans); color: var(--text-sec); text-wrap: pretty; }
.reading-room__forget { padding: 12px 0; min-height: 44px; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
.reading-room__forget[hidden] { display: none; }
.reading-room :where(button, summary, input, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.reading-room__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reading-room__bookmark { margin: 24px 0 8px; padding: 0 0 0 20px; border-left: 1px solid var(--accent); }
.reading-room__bookmark-label { display: block; color: var(--accent); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.reading-room__bookmark p { margin: 7px 0 8px; font: 400 21px/1.4 var(--serif); color: var(--text); }
.reading-room__bookmark a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-sec); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.reading-room__bookmark a:hover { color: var(--accent); }
.article-body[data-reading-size="comfortable"] { --reading-scale: 1.125; }
.article-body[data-reading-size="large"] { --reading-scale: 1.25; }
.article-body:is([data-reading-size="comfortable"], [data-reading-size="large"]) [data-reading-text] {
  font-size: calc(var(--reading-original-size) * var(--reading-scale)) !important;
}
.article-body [id^="reading-paragraph-"] { scroll-margin-top: max(7rem, var(--essay-navigation-offset, 112px)); scroll-margin-bottom: 2rem; }
.article-body [id^="reading-paragraph-"]:focus { outline: none; }
@media (max-width: 520px) {
  .reading-room__panel { padding-top: 16px; }
  .reading-room fieldset { gap: 12px; }
  .reading-room__bookmark { padding-left: 16px; }
}
@media print { .reading-room { display: none !important; } }