/* Playbook page styles.
   Design-system tokens live in ds-modernist.css; everything here is layout the
   Claude Design template carried as inline style or as runtime-computed style. */

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #eae9e9; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }
[hidden] { display: none !important; }

/* --- the book -------------------------------------------------------------
   Fifteen leaves stacked at the spine. Each flips 180° about its left edge;
   z-index ordering is what keeps the stack readable mid-turn. */
.leaf {
  position: absolute; left: 740px; top: 0; width: 740px; height: 960px;
  transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform;
}

/* Screenshots read as desaturated plates inside the book; the lightbox shows
   them at full saturation. */
.shot { filter: grayscale(1) contrast(1.08); }

/* --- contents rows --- */
.toc-row {
  display: grid; grid-template-columns: 52px 1fr auto 52px; gap: 14px;
  align-items: baseline; padding: 16px 6px; border-top: 2px solid var(--color-divider);
  cursor: pointer; transition: background .15s;
}
.toc-row:hover { background: var(--color-accent-100); }
.toc-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- thumb index --- */
.tab {
  appearance: none; border: 2px solid var(--color-divider); border-left: none;
  background: var(--color-bg); color: var(--color-text);
  width: 52px; height: 82px; padding: 9px 6px; overflow: hidden; text-align: left;
  cursor: pointer; display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-body);
  transition: background .18s, color .18s, border-color .18s;
}
.tab:hover { border-color: var(--color-accent); }
.tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tab.is-active {
  border-color: var(--color-accent); background: var(--color-accent);
  color: var(--color-neutral-100);
}

@media (prefers-reduced-motion: reduce) {
  .leaf, #book, #plate, #progressFill { transition-duration: 1ms !important; }
}


/* hover / focus states lifted from the design template */
.hv1:hover{border-color:var(--color-accent);}
.hv2:hover{background:var(--color-accent-100);}
.hv3:hover{background:var(--color-accent); border-color:var(--color-accent);}