/* ── HAUTE LUMIÈRE — THE READING ROOM ───────────────────────────────────────
 *
 * The canonical copy. Edit it here, then run
 * ~/Bastion/Pipeline/bin/reader-sync.mjs to lay it down in every surface that
 * carries it. Editing a laid-down copy is how eleven rooms end up different.
 *
 * It dresses nothing the host page already decided. Every colour is a var with
 * a fallback, so a page in vespers stays in vespers and a page with no tokens
 * at all still gets a legible room. Radius zero, hairline rules, gold as a mark
 * and never a fill, Manrope only on furniture the reader ignores.
 */

html[data-hl-size="1"] { font-size: 15px }
html[data-hl-size="3"] { font-size: 19px }

#hl-thread {
  position: fixed; inset: 0 auto auto 0; height: 1px; width: 0;
  background: var(--gold, #C5A059); z-index: 40;
  transition: width 200ms cubic-bezier(.165,.84,.44,1);
}

.hl-rail {
  position: fixed; right: 0; bottom: 0; z-index: 41;
  display: flex; align-items: center;
  font: 600 9.5px/1 "Manrope", -apple-system, system-ui, sans-serif;
  letter-spacing: .28em; text-transform: uppercase;
  background: var(--paper, #FDF8E4); color: var(--ink, #3A3117);
  border-top: 1px solid var(--rule, rgba(58,49,23,.2));
  border-left: 1px solid var(--rule, rgba(58,49,23,.2));
}
.hl-rail button, .hl-rail .hl-at {
  appearance: none; background: none; border: 0;
  border-right: 1px solid var(--rule, rgba(58,49,23,.12));
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 0 14px; min-height: 44px; cursor: pointer;
}
/* QUIETER IS A COLOUR, NOT AN OPACITY. Dimming type with opacity is fine on
   cream and a readability fault on the three dark registers: .5 over
   --text-body measures about 3.2:1 in vespers, under AA. Every muted label
   below takes --text-muted instead, which each register has already tuned.
   The shadows and the scrim take --shadow-sheet and --veil for the same
   reason: a fixed brown stays brown on a blue-black page. */
.hl-rail > :last-child { border-right: 0 }
.hl-rail button:hover { color: var(--gold-d, #A2803C) }
.hl-rail .hl-at { cursor: default; font-variant-numeric: tabular-nums; color: var(--text-muted, #5C7065) }

.hl-sheetlist {
  position: fixed; inset: 0 0 0 auto; width: min(92vw, 460px); z-index: 60;
  background: var(--paper, #FDF8E4); color: var(--ink, #3A3117);
  border-left: 1px solid var(--rule, rgba(58,49,23,.2));
  overflow: auto; padding: clamp(24px, 5vw, 52px);
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(.165,.84,.44,1);
  box-shadow: var(--shadow-sheet, 0 40px 90px -40px rgba(var(--veil, 12,30,22),.5));
}
.hl-sheetlist[data-open="1"] { transform: none }
.hl-sheetlist h2 {
  font: 300 clamp(20px,3vw,28px)/1.15 "Cormorant Garamond", Garamond, Georgia, serif;
  margin: 0 0 6px; color: inherit;
}
.hl-sheetlist p.hl-of {
  font: 600 9.5px/1 "Manrope", system-ui, sans-serif; letter-spacing: .32em;
  text-transform: uppercase; color: var(--gold-d, #A2803C); margin: 0 0 22px;
}
.hl-sheetlist ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule, rgba(58,49,23,.14)) }
.hl-sheetlist li { border-bottom: 1px solid var(--rule, rgba(58,49,23,.14)) }
.hl-sheetlist a {
  display: grid; grid-template-columns: 3ch 1fr; gap: 18px; align-items: baseline;
  padding: 13px 0; text-decoration: none; color: inherit;
  font: 300 17px/1.4 "Cormorant Garamond", Garamond, Georgia, serif;
}
.hl-sheetlist a:hover { color: var(--gold-d, #A2803C) }
.hl-sheetlist a .hl-n { font-style: italic; color: var(--text-muted, #5C7065); font-variant-numeric: tabular-nums }
.hl-sheetlist a small { display: block; font-style: italic; color: var(--text-muted, #5C7065); font-size: .88em; margin-top: 3px }

#hl-veil {
  position: fixed; inset: 0; z-index: 59; background: rgba(var(--veil, 12,30,22),.36);
  opacity: 0; pointer-events: none;
  transition: opacity 400ms cubic-bezier(.165,.84,.44,1);
}
#hl-veil[data-open="1"] { opacity: 1; pointer-events: auto }

.hl-back {
  position: fixed; left: 0; bottom: 0; z-index: 41; max-width: min(92vw, 430px);
  background: var(--paper, #FDF8E4); color: var(--ink, #3A3117);
  border-top: 1px solid var(--rule, rgba(58,49,23,.2));
  border-right: 1px solid var(--rule, rgba(58,49,23,.2));
  padding: 14px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font: 300 16px/1.5 "Cormorant Garamond", Garamond, Georgia, serif;
}
.hl-back button {
  appearance: none; background: none;
  border: 1px solid var(--rule, rgba(58,49,23,.3)); color: var(--gold-d, #A2803C);
  font: 600 9.5px/1 "Manrope", system-ui, sans-serif; letter-spacing: .28em;
  text-transform: uppercase; padding: 10px 12px; min-height: 44px; cursor: pointer;
}
.hl-back button.hl-no { border-color: transparent; color: var(--text-muted, #5C7065) }

.hl-keys {
  position: fixed; inset: 50% auto auto 50%; transform: translate(-50%,-50%); z-index: 70;
  background: var(--paper, #FDF8E4); color: var(--ink, #3A3117);
  border: 1px solid var(--rule, rgba(58,49,23,.24));
  padding: clamp(24px,4vw,44px); box-shadow: var(--shadow-sheet, 0 40px 90px -40px rgba(var(--veil, 12,30,22),.5));
  font: 300 16px/1.7 "Cormorant Garamond", Garamond, Georgia, serif; max-width: 380px;
}
.hl-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 14px 0 0 }
.hl-keys dt {
  font: 600 10px/1.6 "Manrope", system-ui, sans-serif; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-muted, #5C7065);
}
.hl-keys dd { margin: 0 }

@media print { #hl-thread, .hl-rail, .hl-sheetlist, .hl-back, .hl-keys, #hl-veil { display: none } }
@media (prefers-reduced-motion: reduce) {
  #hl-thread, .hl-sheetlist, #hl-veil { transition: none }
}