/* ======================================================================
   The register — one table of contents for the five pages that carry one

   The reading edition, „Die Deutung", „Der Obstpfarrer", „Imkern ohne
   Rähmchen" and the gallery each stood with a register of their own until
   6 September 2026: the rules lived in `draft-workshop.css` and again in
   `index.css`, the byway in `masthead.css`, the gallery's two states in
   `gallery.css`, and every page built the markup by hand. Stefan on that day:
   „jetzt sollen die toc aller 5 seiten vereinheitlicht werden. keine code
   redundanz zulassen. selbes styling, selbe funktionsweise … das toc von
   transkript dient als pattern."

   So the form is the reading edition's, and it stands here once. The markup
   comes out of `lib/register.php` for every page; the placement in the page
   is the grid of `base.css` (`.register-layout`); the behaviour — the part
   being read opened, the entry in gold, the drawer on narrow screens — is
   `js/transcription.js`, and the gallery adds its following and choosing in
   `js/gallery.js`.

   An entry has two lines where it has a count: the mark in small capitals over
   the name in Charter. The reading edition counts its chapters, the gallery
   its works by year; the parts of the three essays have names and no count
   — „keine nummerierung im toc. wir sind keine buchhalter." The entries under
   a chapter carry a § number in the reading edition and none elsewhere.
   ====================================================================== */

/* A light column, set off by one hairline. It sticks below the bar of the
   edition and scrolls for itself only when it is longer than the window. 56 px
   at the head, in line with the first line of the sheet beside it, and 40 at
   the left on every page, so that the register begins in one place. */
#index {
  position: sticky;
  top: var(--masthead-height, 0px);
  max-height: calc(100vh - var(--masthead-height, 0px));
  overflow-y: auto;
  padding: 56px 36px 44px 40px;
  border-right: 1px solid var(--rule-fine);
  font-family: var(--apparatus);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

/* ---------- The byway ------------------------------------------------ */

/* The way to the other version of the same text, at the head of the register.
   The rule stands under it and not over it: it is the first line of the
   register, and a line above it separated it from the bar rather than from
   the list of chapters under it. */
.index-byway {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-fine);
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.5;
}
.byway-mark {
  margin: 0 0 .25rem;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}
.index-byway ul {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.index-byway a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.index-byway a:hover,
.index-byway a:focus-visible { border-bottom-style: solid; }
.index-byway a.is-here {
  border-bottom-style: solid;
  opacity: .55;
}

/* ---------- The entries ---------------------------------------------- */


/* No rule between two entries: one hairline under the byway is all the design
   carries, and fifteen more turned the list into a table. */
.index-chapter {
  display: block;
  padding: 7px 0;
  color: inherit;
  text-decoration: none;
  text-wrap: balance;
}

.index-mark {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-far);
}

.index-name {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}

.index-chapter:hover .index-name { color: var(--gold); }

/* The year of a work in the gallery, behind its name in the same line. */
.index-aside {
  margin-left: .45em;
  font-family: var(--apparatus);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-far);
  white-space: nowrap;
}

/* The chapter being read steps back and lets its entries carry the attention;
   its mark turns gold. Only that chapter shows its entries, the others stand
   as one each, so that the register keeps its shape. */
.index-section.is-expanded .index-name { color: var(--ink-far); }
.index-section.is-expanded .index-mark { color: var(--gold); }

.index-paragraphs { display: none; }
.index-section.is-expanded .index-paragraphs {
  display: block;
  margin: 4px 0 1rem;
  border-left: 1px solid var(--rule);
}

.index-paragraphs a {
  display: block;
  padding: 4px 0 4px 12px;
  color: var(--ink-quiet);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.index-paragraphs a:hover { color: var(--ink); }

/* Where an entry carries a number, it stands in a column of its own, right
   aligned, so that the names line up behind it. */
.index-paragraphs a:has(.index-number) {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .3rem;
}
.index-number {
  color: var(--verdigris);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.index-number::before { content: "§"; margin-right: .12em; opacity: .5; }

/* The reading position: the only gold on the page. The line at the edge of
   the entry takes the gold of the bar, not the gold of the type: it lies at
   the edge and wants the lighter step. */
.index-chapter.is-active .index-name { color: var(--gold); }
.index-paragraphs a.is-active,
.index-paragraphs a.is-active .index-number { color: var(--gold); }
.index-paragraphs a.is-active { box-shadow: inset 2px 0 0 #c9a45c; }

/* The gallery's two states, set by `js/gallery.js`, in the vocabulary of the
   other pages: the work one is looking at while scrolling takes the gold of
   the chapter being read (its year, as the mark above), the work one has
   chosen the gold of the entry being read. A grey line with an indent stood
   here until 6 September 2026 and made the register the odd one out. */
.index-chapter.is-visible .index-aside { color: var(--gold); }
.index-chapter.is-selected .index-name { color: var(--gold); }

/* ---------- The foot ------------------------------------------------- */

.index-foot {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rule-fine);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-far);
}
.index-foot a { color: var(--verdigris); }
.index-foot p { margin: 0 0 .5em; }
.index-foot p:last-child { margin-bottom: 0; }

#index-toggle { display: none; }

/* ---------- The drawer ----------------------------------------------- */

/* Below the width at which register and sheet stand side by side
   (`base.css`), the register becomes a drawer with a fixed button, so that
   the way back exists from every place on the page. */
@media (max-width: 1499px) {
  #index {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(22rem, 88vw);
    max-height: none;
    /* Room for the button at the head of the drawer: it stands fixed over the
       page, and with the drawer open it lay across the first entries. Stefan on
       6 September 2026: „mein button überlagert menu." The distance is the bar
       of the edition plus the button's own height and the air over it. */
    padding-top: calc(var(--masthead-height, 0px) + 4.4rem);
    z-index: 15;
    background: var(--sheet);
    border-right: 1px solid var(--rule);
    transform: translateX(-101%);
    transition: transform .25s ease;
  }
  #index.is-open { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    #index { transition: none; }
  }

  /* The button stands below the bar of the edition and stays where it is
     while the page scrolls. */
  #index-toggle {
    position: fixed;
    top: calc(var(--masthead-height, 0px) + .75rem);
    left: 1rem;
    z-index: 16;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border: 1px solid var(--rule);
    background: var(--sheet);
    color: var(--ink);
    font-family: var(--apparatus);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
  }
  #index-toggle .bar {
    width: 1rem; height: 1px;
    background: currentColor;
    box-shadow: 0 4px 0 currentColor, 0 -4px 0 currentColor;
  }

  /* And the head of the page starts below the button. Measured at 900 px: the
     button ran from 70 to 109 and the first line began at 105. The second
     selector is the head of „Die Deutung", which stands inside the opening
     grid and drops its padding there. The reading edition's sheet makes the
     same room in `draft-workshop.css`. */
  .register-layout .titlepage,
  .register-layout.interpretation .contents .titlepage { padding-top: 4.8rem; }
}