/* NHỮNG LÁ THƯ — the Table-of-Contents drawer, one shared component.
 *
 * Used identically by two lists so they can never drift apart:
 *   · inside a letter — the chapter contents (Mục lục)
 *   · on the homepage — the letters of the collection (Mục lục Những Lá Thư)
 *
 * Same panel, overlay, animation, header, close button, dividers, row layout, numbering,
 * metadata, active colour, hover/focus and scroll. Only the data differs. Both the reader
 * (engine.css) and the homepage (letters.css) link this file, so there is one source of truth.
 * It relies only on the shared design tokens both stylesheets define (--paper, --scrim, --bg,
 * --border, --accent, --ink, --ink-soft, --sans). */

/* ── Canonical content-card width — ONE source of truth ───────────────────────
   The width of a content card is set HERE, in the file both the reader (engine.css) and the browse
   pages (letters.css) link, so a chapter card, the reflection card and every homepage section card
   are the same width and can never drift. It is the reader chapter card's own column:
     desktop  = 40rem measure + 7rem gutter = 47rem
     ≤1024px  = 33rem measure + 7rem gutter = 40rem
   Applied to the card CONTAINER; a 1.25rem inline padding on both sides gives the visible card.
   NOT for the hero, header, footer, filters, menu panel or CTA — only content cards. */
:root{ --content-card-max:47rem; }
@media (max-width:1024px){ :root{ --content-card-max:40rem; } }

/* ── The rows (shared with a letter's static cover contents) ── */
.toc__list{list-style:none;margin:0;padding:0}
.toc__item{border-bottom:1px solid var(--border)}
.toc__item:first-child{border-top:1px solid var(--border)}
.toc__link{
  display:flex;align-items:baseline;gap:1.25rem;
  padding:1.125rem .25rem;
  text-decoration:none;color:var(--ink);
  transition:color .2s ease;
}
.toc__link:hover{color:var(--accent)}
.toc__n{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  color:var(--ink-soft);flex-shrink:0;min-width:1.5rem;
  font-variant-numeric:tabular-nums;
}
.toc__t{font-family:var(--sans);font-size:.9375rem;line-height:1.5;flex:1}
.toc__sub{display:block;margin-top:.15rem;font-family:var(--serif);font-style:italic;font-size:.8125rem;line-height:1.45;color:var(--ink-soft)}
.toc__min{
  font-family:var(--sans);font-size:.6875rem;color:var(--ink-soft);
  flex-shrink:0;font-variant-numeric:tabular-nums;opacity:.75;
}
/* A part heads its group; the chapters beneath it are its own. */
.toc__item--part .toc__link{padding-top:2.25rem}
.toc__item--part .toc__t{
  font-size:.6875rem;font-family:var(--sans);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.toc__item--part .toc__min{display:none}
.toc__item--part{border-bottom-color:transparent}

/* ── The icon button (drawer close, and reader header controls) ── */
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  background:none;border:none;cursor:pointer;
  color:var(--ink-soft);border-radius:4px;
  font-family:var(--sans);font-size:.75rem;
  transition:color .2s ease;
}
.iconbtn:hover:not(:disabled){color:var(--accent)}
.iconbtn:disabled{opacity:.28;cursor:default}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── The drawer ── */
.drawer{
  position:fixed;inset:0;z-index:50;
  visibility:hidden;
}
.drawer.is-open{visibility:visible}
.drawer__scrim{
  position:absolute;inset:0;
  background:var(--scrim);
  opacity:0;transition:opacity .3s ease;
}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(25rem,90vw);
  background:var(--paper);
  border-left:1px solid var(--border);
  padding:0 1.5rem 2rem;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex;flex-direction:column;
}
.drawer.is-open .drawer__panel{transform:translateX(0)}
/* The head sticks to the top of the panel, so the current title + close stay in reach while a long
   chapter list scrolls under them. Its own background covers the scrolling content. */
.drawer__head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--paper);
  padding:1.25rem 0 1rem;margin-bottom:.5rem;
  border-bottom:1px solid var(--card-border,var(--border));
}
.drawer__label{
  font-family:var(--serif);font-size:1.0625rem;line-height:1.3;color:var(--ink);
  overflow-wrap:anywhere;                 /* a long work title wraps, never overflows */
  text-wrap:balance;                      /* and never drops a lone word onto its last line */
}
.drawer__body{flex:1 0 auto}
.drawer .toc__t{font-size:.9375rem}
.drawer .toc__link{padding:.875rem .25rem}
.drawer .toc__link[aria-current="true"]{color:var(--accent)}
.drawer__foot{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--card-border,var(--border));text-align:center}

/* ── Contextual content menu (drawer body) ──────────────────
   The list changes with what you're reading: a book's Phần → Chương, a letter's chapters, or the
   library of stories. Editorial and quiet — typography, hairlines, a restrained orange for the
   one item you're on. No badges, no icons, no dates, no reading time. */
.ctx__section{margin-bottom:1.75rem}
.ctx__section:last-child{margin-bottom:0}
.ctx__title{
  font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 .35rem;
}
.ctx__chapters,.ctx__works{list-style:none;margin:0;padding:0}
/* A part heads its group; its chapters indent slightly beneath it (books only). */
.ctx__part{
  font-family:var(--serif);font-style:italic;font-size:.875rem;color:var(--ink-soft);
  padding:1.15rem 0 .3rem;
}
.ctx__part:first-child{padding-top:.25rem}
.ctx__ch{border-bottom:1px solid var(--card-border,var(--border))}
.ctx__ch:last-child{border-bottom:0}
body[data-type="book"] .ctx__ch .toc__link{padding-left:.9rem}
/* The chapter you're in: medium weight + a 1px orange left accent, never a filled capsule. */
.ctx__ch .toc__link[aria-current="true"]{
  color:var(--accent);font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent);
}
body[data-type="book"] .ctx__ch .toc__link[aria-current="true"]{padding-left:.9rem}
/* Sibling works — other books / letters / the story library. Title, optional short lead. */
.ctx__work{border-bottom:1px solid var(--card-border,var(--border))}
.ctx__work:last-child{border-bottom:0}
.ctx__wlink{
  display:block;padding:.85rem .25rem;
  color:var(--ink);text-decoration:none;
  transition:color .15s ease;
}
.ctx__wlink:hover{color:var(--accent)}
.ctx__wt{display:block;font-family:var(--sans);font-size:.9375rem;line-height:1.4}
.ctx__ws{
  display:block;margin-top:.2rem;
  font-family:var(--serif);font-style:italic;font-size:.8125rem;line-height:1.45;color:var(--ink-soft);
}
.ctx__work.is-current .ctx__wlink{
  color:var(--accent);font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent);padding-left:.7rem;
}
/* Footer — one quiet path to the whole collection of this type (never the global five sections). */
.ctx__all{
  display:inline-block;
  font-family:var(--sans);font-size:.8125rem;letter-spacing:.02em;
  color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--border);padding-bottom:.15rem;
  transition:color .15s ease,border-color .15s ease;
}
.ctx__all:hover{color:var(--accent);border-color:var(--accent)}