/* One article: the outline changes place, never the reading or selection nodes. */
#reader-reading-layout { min-width: 0; }
#reader-outline-panel, #reader-outline-quick { display: none; }
#reader-outline-open { min-width: 44px; min-height: 44px; }
#reader-outline-panel { min-width: 0; border-inline-end: 1px solid var(--rule); background: var(--paper); }
#reader-outline-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 8px 8px; }
#reader-outline-panel h2 { font-size: 13px; line-height: 1.5; margin: 0; color: var(--muted); }
.reader-outline-position { color: var(--soft); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reader-outline-list { min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.reader-outline-item { display: block; width: 100%; min-width: 44px; min-height: 44px; margin: 0; padding: 9px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); text-align: start; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; box-shadow: none; }
.reader-outline-item[aria-current="location"] { color: var(--wine); border-color: var(--wine-soft); background: var(--wine-soft); }
.reader-outline-item:focus-visible { outline: 2px solid var(--wine); outline-offset: -2px; }
#reader-outline-dialog .dialog-scroll { min-height: 0; }
#reader-outline-dialog .reader-outline-item { font-size: 13px; }
#reader-outline-dialog .reader-outline-list { overflow: visible; }
#reader-outline-panel[hidden], #reader-outline-quick[hidden], #reader-outline-open[hidden] { display: none !important; }
@container app (min-width: 660px) {
  #reader-reading-layout.has-reader-outline { display: grid; grid-template-columns: clamp(160px, 21cqi, 200px) minmax(0, 1fr); align-items: start; padding-inline: 12px 0; }
  #reader-reading-layout.has-reader-outline #reader-outline-panel { display: flex; flex-direction: column; position: sticky; top: calc(var(--read-header-height) + 72px); max-height: max(120px, calc(var(--app-height) - var(--read-header-height) - 176px)); padding: 6px 8px 8px 0; }
  #reader-reading-layout.has-reader-outline #reader-document { min-width: 0; padding-inline: 18px 20px; }
  #reader-outline-open { display: none; }
}
@container app (min-width: 820px) {
  #reader-reading-layout.has-reader-outline { grid-template-columns: clamp(160px, 21cqi, 200px) minmax(0, 1fr) 48px; padding-inline-end: 8px; }
  #reader-reading-layout.has-reader-outline #reader-outline-quick { display: flex; flex-direction: column; position: sticky; top: calc(var(--read-header-height) + 72px); max-height: max(120px, calc(var(--app-height) - var(--read-header-height) - 170px)); overflow-y: auto; border-inline-start: 1px solid var(--rule); padding-inline-start: 3px; }
  #reader-outline-quick .reader-outline-item { padding-inline: 4px; text-align: center; font-variant-numeric: tabular-nums; }
}
html[data-reader-aux="pane"] #reader-reading-layout.has-reader-outline { display: block; padding: 0; }
html[data-reader-aux="pane"] #reader-reading-layout.has-reader-outline #reader-outline-panel { display: flex; flex-direction: column; position: fixed; z-index: 9; left: var(--aux-left); top: var(--aux-top); width: var(--aux-width); height: var(--aux-height); max-height: none; padding: 14px 12px; overflow: hidden; border: 1px solid var(--rule); background: #0e1622; }
html[data-reader-aux="pane"] #reader-outline-open, html[data-reader-aux="pane"] #reader-outline-quick { display: none; }
html[data-reader-aux="pane"] body.modal-open #reader-outline-panel { visibility: hidden; }
html[data-posture-mode="clock"] #reader-outline-panel { visibility: hidden; }