/* ============================================================
   ebook-history — timeline component for the Overdue Conversations
   research section. Pairs with ebook-history.js. Uses the page's
   shared theme vars (unhinged-warm-a11y.css + catalog.css) so it
   follows the theme toggle and the ND accessibility settings.
   ============================================================ */

/* track colours: mid-tones that read on both the moleskine dark
   default and the light theme. One per event category. */
.t-corporate  { --tc:#6fa8d0; }
.t-product    { --tc:#8fbf9f; }
.t-governance { --tc:#d8a94e; }
.t-legal      { --tc:#d9806e; }
.t-industry   { --tc:#ab90d4; }

.eh-dot{ display:inline-block; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--tc,var(--dim,var(--muted))); vertical-align:middle; flex:0 0 auto; }

/* --- hero stat pair (matches the ce-stats idiom) --- */
.eh-stats{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.3rem 0 .3rem; }
.eh-stat{ flex:1 1 220px; border:1px solid var(--line,var(--rule)); border-radius:6px;
  padding:1rem 1.1rem; background:var(--card); }
.eh-stat b{ display:block; font-family:var(--mono); font-size:2.1rem; line-height:1;
  color:var(--rust,var(--clay)); }
.eh-stat span{ display:block; margin-top:.5rem; font-size:.74rem; letter-spacing:.05em;
  line-height:1.4; color:var(--dim,var(--muted)); }

/* --- controls: search + track chips + open-all --- */
.eh-controls{ display:none; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin:1.6rem 0 .5rem; }
html.js .eh-controls{ display:flex; }
.eh-search{ flex:1 1 15rem; min-height:44px; padding:.55rem .8rem;
  font:inherit; font-size:.9rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--line,var(--rule)); border-radius:6px; }
.eh-search::placeholder{ color:var(--faint,var(--dim)); }
.eh-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.eh-chip{ display:inline-flex; align-items:center; gap:.4rem; min-height:36px;
  padding:.35rem .7rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--dim,var(--muted)); background:transparent; cursor:pointer;
  border:1px solid var(--line,var(--rule)); border-radius:20px; }
.eh-chip:hover{ color:var(--ink); border-color:var(--faint,var(--dim)); }
.eh-chip[aria-pressed="true"]{ color:var(--ink); background:var(--card);
  border-color:var(--rust,var(--clay)); }
.eh-expand{ min-height:36px; padding:.35rem .8rem; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.04em; color:var(--ink); background:transparent;
  cursor:pointer; border:1px solid var(--line,var(--rule)); border-radius:6px; }
.eh-expand:hover{ border-color:var(--rust,var(--clay)); }
.eh-count{ font-family:var(--mono); font-size:.74rem; letter-spacing:.03em;
  color:var(--dim,var(--muted)); margin:.2rem 0 1.2rem; }

/* compact legend for no-js / at-a-glance track meaning */
.eh-legend{ display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; margin:.3rem 0 0;
  font-size:.72rem; color:var(--dim,var(--muted)); }
.eh-legend span{ display:inline-flex; align-items:center; gap:.4rem; }

/* --- the timeline: year rail + expandable entries (ce-timeline idiom) --- */
.eh-timeline{ list-style:none; margin:.6rem 0 0; padding:0 0 0 1.4rem;
  border-left:1px solid var(--line,var(--rule)); }
.eh-timeline > li{ position:relative; }

.eh-decade{ margin:1.6rem 0 .9rem; padding-left:.2rem; font-family:var(--mono);
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint,var(--dim)); }
.eh-decade:first-child{ margin-top:.2rem; }
.eh-decade::before{ content:""; position:absolute; left:calc(-1.4rem - 5px); top:.35rem;
  width:9px; height:9px; border-radius:50%; background:var(--bg);
  border:2px solid var(--faint,var(--dim)); }

.eh-item{ padding:0 0 1.25rem .3rem; }
.eh-item::before{ content:""; position:absolute; left:calc(-1.4rem - 4px); top:.55rem;
  width:7px; height:7px; border-radius:50%; background:var(--dim,var(--muted));
  box-shadow:0 0 0 3px var(--bg); }

.eh-yr{ display:block; font-family:var(--mono); font-weight:700; font-size:.72rem;
  letter-spacing:.03em; color:var(--rust,var(--clay)); margin-bottom:.1rem; }

.eh-item details{ margin:0; }
.eh-item summary{ cursor:pointer; list-style:none; display:flex; align-items:baseline;
  flex-wrap:wrap; gap:.5rem; padding:.15rem 0; }
.eh-item summary::-webkit-details-marker{ display:none; }
.eh-t{ font-family:var(--serif); font-size:1rem; line-height:1.35; color:var(--ink); }
.eh-item summary:hover .eh-t{ color:var(--rust,var(--clay)); }
.eh-dots{ display:inline-flex; align-items:center; gap:.25rem; }
.eh-more{ margin-left:auto; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--rust,var(--clay)); }
.eh-item details[open] .eh-more{ display:none; }

.eh-d{ padding:.4rem 0 .2rem; }
.eh-facts{ margin:.1rem 0 .55rem; font-size:.95rem; line-height:1.62; color:var(--ink); }
.eh-src{ margin:.2rem 0 0; font-size:.78rem; line-height:1.5; color:var(--dim,var(--muted)); }
.eh-src-lab{ font-family:var(--mono); font-size:.64rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--rust,var(--clay)); margin-right:.35rem; }
.eh-track{ margin:.45rem 0 0; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint,var(--dim)); }

@media (max-width:560px){
  .eh-stat b{ font-size:1.7rem; }
  .eh-more{ margin-left:0; }
}