/* Floating "field notes" booklet — an always-open mini table of contents that
   rides along in the corner of every research page. Injected by js/booklet.js.
   Inherits tokens from styles.css. Only present where booklet.js is loaded. */

.booklet {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 40;
  width: min(15.5rem, 66vw);
  font-family: var(--sans);
  opacity: 0.94;
}
.booklet:hover, .booklet:focus-within { opacity: 1; }

/* entrance (JS on); with JS off the widget never exists, the in-page chapnav covers nav */
html.js-enabled .booklet { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
html.js-enabled .booklet.is-in { opacity: 0.94; transform: none; }
html.js-enabled .booklet.is-in:hover, html.js-enabled .booklet.is-in:focus-within { opacity: 1; }

/* ---- the open page ---- */
.booklet__stack { position: relative; }
.booklet__page {
  position: relative;
  background: linear-gradient(120deg, #FBF7EF 0%, var(--parchment) 62%, #EDE5D6 100%);
  border: 1px solid rgba(143, 168, 147, 0.55);
  border-radius: 3px 9px 9px 3px;
  padding: 0.85rem 0.95rem 0.8rem 1.1rem;
  /* drop shadow + two stacked page edges toward the corner for a book's depth */
  box-shadow:
    10px 16px 34px rgba(34, 27, 21, 0.20),
    3px 4px 0 -1px #EFE8DB,
    5px 7px 0 -2px #E7DFCF;
}
/* inner spine shadow, so the panel reads as the right page of an open book */
.booklet__page::before {
  content: "";
  position: absolute; left: 1px; top: 7px; bottom: 7px; width: 12px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(29, 74, 56, 0.15), rgba(29, 74, 56, 0));
  pointer-events: none;
}

.booklet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.45rem;
}
.booklet__kicker {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em;
  color: var(--terracotta);
}
.booklet__min {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 1rem; line-height: 0.7;
  color: var(--sage); padding: 0 0.15rem;
  transition: color 200ms var(--ease);
}
.booklet__min:hover { color: var(--forest); }

.booklet__toc { list-style: none; margin: 0; padding: 0; }
.booklet__toc li { border-top: 1px solid rgba(143, 168, 147, 0.4); }
.booklet__toc li:last-child { border-bottom: 1px solid rgba(143, 168, 147, 0.4); }
.booklet__toc a, .booklet__toc .cur {
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.34rem 0.1rem;
  font-family: var(--serif); font-size: 0.84rem; line-height: 1.12;
  color: var(--ink); text-decoration: none;
  transition: color 200ms var(--ease), transform 200ms var(--ease);
}
.booklet__toc .bn {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em;
  color: var(--sage); flex: 0 0 auto;
}
.booklet__toc a:hover { color: var(--forest); transform: translateX(3px); }
.booklet__toc a:hover .bn { color: var(--forest); }
.booklet__toc .cur { color: var(--forest); font-style: italic; }
.booklet__toc .cur .bn { color: var(--terracotta); }

.booklet__folio {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em;
  color: var(--sage); margin-top: 0.55rem;
}

/* ---- collapsed state: a small book spine you can reopen ---- */
.booklet__spine {
  display: none;
  align-items: center; gap: 0.5rem; margin-left: auto;
  background: linear-gradient(155deg, #235743 0%, var(--forest) 60%, #17402F 100%);
  color: var(--parchment); border: 0; border-radius: 999px;
  padding: 0.55rem 0.95rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  box-shadow: 0 10px 24px rgba(34, 27, 21, 0.26);
  transition: transform 200ms var(--ease);
}
.booklet__spine:hover { transform: translateY(-1px); }
.booklet__spine svg { display: block; }

.booklet.is-collapsed { width: auto; display: flex; justify-content: flex-end; }
.booklet.is-collapsed .booklet__stack { display: none; }
.booklet.is-collapsed .booklet__spine { display: inline-flex; }

.booklet a:focus-visible, .booklet button:focus-visible {
  outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html.js-enabled .booklet { transition: none !important; transform: none !important; opacity: 0.94; }
  .booklet, .booklet__toc a, .booklet__spine { transition: none !important; }
}