/* ==========================================================================
   Information for Action — book-specific components, layered on the shared
   Community Informatics theme (theme.css). Only what the book needs that the
   generic theme does not already provide: the chapter hero, the exercise box,
   the learning-objectives list, chapter prev/next, and the home chapter grid.
   All colours come from the theme tokens, so all four themes are honoured.
   ========================================================================== */

/* ---- Chapter hero -------------------------------------------------------- */
.chap-hero{ padding:2.6rem 0 1.2rem; border-bottom:1px solid var(--hairline); }
.chap-hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.4rem; align-items:center; }
.chap-hero h1{ font-size:clamp(2.4rem,6vw,3.6rem); line-height:1.02; margin:.3rem 0 .5rem; }
.chap-sub{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 .9rem; }
.chap-opener{ margin:0; }
.chap-opener .mat{ max-width:400px; margin-left:auto; }
.chap-opener img{ border-radius:4px; }
@media (max-width:760px){
  .chap-hero-in{ grid-template-columns:1fr; gap:1.4rem; }
  .chap-opener .mat{ max-width:320px; margin:0 auto; }
}

/* ---- Learning objectives box --------------------------------------------- */
.lo{ background:var(--callout-bg); border:1px solid var(--hairline); border-radius:12px;
  padding:1.3rem 1.5rem; margin:0 0 2rem; }
.lo .lbl{ display:block; font-family:var(--mono,'JetBrains Mono',monospace); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.lo ol{ margin:0; padding-left:1.3em; }
.lo li{ margin:.45em 0; color:var(--lead); }

/* ---- Exercise box (the book's gold boxes) -------------------------------- */
.exercise{ background:var(--surface); border:1px solid var(--gold);
  border-radius:12px; padding:1.4rem 1.6rem; margin:2.2rem 0;
  box-shadow:5px 5px 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
.exercise > .lbl{ display:inline-block; font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  font-weight:600; margin-bottom:.7rem; }
.exercise p{ margin:.55em 0; }
.exercise p.sub{ font-weight:600; color:var(--heading); margin-top:1.1em; }

/* ---- Section separators inside prose ------------------------------------- */
.prose h2{ padding-top:.4rem; border-top:1px solid var(--hairline); }
.prose h2:first-child{ border-top:0; padding-top:0; }
.prose figure.fig{ margin:2rem 0; }

/* ---- Chapter prev / next ------------------------------------------------- */
.chap-nav{ border-top:1px solid var(--hairline); margin-top:2.4rem; padding-top:1.6rem; }
.chap-nav-in{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.chap-nav a{ display:block; max-width:22rem; text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:10px; padding:.8rem 1.1rem; transition:border-color .15s; }
.chap-nav a:hover{ border-color:var(--accent); }
.chap-nav .dir{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--secondary); }
.chap-nav .nm{ display:block; color:var(--heading); font-weight:600; margin-top:.2rem; }
.chap-nav .next{ margin-left:auto; text-align:right; }

/* ---- Home: book hero + chapter grid -------------------------------------- */
.book-hero .mat{ max-width:430px; margin:0 auto; }
.chapter-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1.3rem; margin-top:1.8rem; }
.chapter-grid .card{ display:flex; flex-direction:column; }
.chapter-grid .card .thumb{ background:var(--plate); border:1px solid var(--plate-edge);
  border-radius:8px; overflow:hidden; aspect-ratio:4/3; margin-bottom:.9rem; }
.chapter-grid .card .thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.chapter-grid .card .cn{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.chapter-grid .card h3{ margin:.25rem 0 .4rem; font-size:1.12rem; }
.chapter-grid .card p{ font-size:.92rem; color:var(--lead); margin:0; }

/* ---- Video placeholder --------------------------------------------------- */
.film-slot{ background:var(--surface); border:1px dashed var(--rule); border-radius:12px;
  padding:1.5rem 1.6rem; margin:1.3rem 0; }
.film-slot .lbl{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--secondary); }
.film-slot h3{ margin:.3rem 0 .5rem; }
.film-slot .frame{ aspect-ratio:16/9; background:var(--bg-2); border:1px solid var(--hairline);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-family:var(--mono,'JetBrains Mono',monospace); font-size:.8rem; margin-top:1rem; }

/* ---- Flipbook (the printed book, page by page) --------------------------- */
.flipbook{ max-width:min(94vw,700px); margin:1.6rem auto 0; }
.flip-stage{ position:relative; width:100%; aspect-ratio:595/842; perspective:2600px;
  background:var(--plate); border:1px solid var(--plate-edge); border-radius:5px;
  box-shadow:var(--shadow); overflow:hidden; user-select:none; }
.flip-static, .flip-leaf, .flip-leaf-face{ position:absolute; inset:0; }
.flip-static img, .flip-leaf-face img{ width:100%; height:100%; object-fit:contain; display:block;
  background:var(--plate); }
.flip-leaf{ transform-style:preserve-3d; transform-origin:left center;
  transition:transform .72s cubic-bezier(.42,0,.22,1); will-change:transform; z-index:3; }
.flip-leaf-face{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-leaf-back{ transform:rotateY(180deg); }
.flip-leaf.hidden{ display:none; }
.flip-leaf.turn-fwd{ transform:rotateY(-180deg); }
.flip-shadow{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 42%);
  transition:opacity .72s ease; }
.flip-shadow.on{ opacity:1; }

.flip-controls{ display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:1rem auto 0; flex-wrap:wrap; }
.flip-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--hairline); border-radius:50%; background:var(--surface); color:var(--heading);
  cursor:pointer; transition:border-color .15s, background .15s; }
.flip-btn:hover:not(:disabled){ border-color:var(--accent); }
.flip-btn:disabled{ opacity:.35; cursor:default; }
.flip-count{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:.85rem; color:var(--secondary);
  min-width:8.5rem; text-align:center; }
.flip-count input{ width:3.4rem; text-align:center; background:var(--bg-2); color:var(--heading);
  border:1px solid var(--hairline); border-radius:6px; padding:.2rem .3rem; font:inherit; }
.flip-hint{ text-align:center; color:var(--muted); font-size:.82rem; margin-top:.7rem; }
.flip-dl{ text-align:center; margin-top:1.1rem; }

/* ---- 3D hardcover book (the cover as an object, transparent around it) ---- */
.book3d{ position:relative; display:flex; justify-content:center; align-items:flex-end;
  perspective:2400px; padding:1.4rem 0 2.8rem; }
.book3d-it{ position:relative; width:var(--bw,300px); aspect-ratio:1792/2400;
  transform-style:preserve-3d; transform:rotateX(4deg) rotateY(-26deg);
  transition:transform .7s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.book3d:hover .book3d-it{ transform:rotateX(2deg) rotateY(-14deg); }
.book3d-face{ position:absolute; inset:0; transform:translateZ(calc(var(--bt,30px) / 2));
  border-radius:2px 6px 6px 2px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.35); }
.book3d-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.book3d-face::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 10%,
    rgba(255,255,255,0) 40%, rgba(0,0,0,.10) 100%); }
.book3d-pages{ position:absolute; top:1.4%; height:97.2%; right:0; width:var(--bt,30px);
  transform:rotateY(90deg) translateX(calc(var(--bt,30px) / 2)); transform-origin:right center;
  background:repeating-linear-gradient(90deg,#f1ece1 0,#f1ece1 1.4px,#cdc5b4 2.3px,#f1ece1 3.3px);
  border-radius:0 2px 2px 0; }
.book3d-spine{ position:absolute; top:0; height:100%; left:0; width:var(--bt,30px);
  transform:rotateY(-90deg) translateX(calc(var(--bt,30px) / -2)); transform-origin:left center;
  background:linear-gradient(90deg,#0a1424,#22385d 55%,#0a1424);
  border-radius:2px 0 0 2px; box-shadow:inset -6px 0 10px rgba(0,0,0,.35); }
.book3d-back{ position:absolute; inset:0; transform:translateZ(calc(var(--bt,30px) / -2));
  background:#12263f; border-radius:2px 6px 6px 2px; }
.book3d-shadow{ position:absolute; left:50%; transform:translateX(-52%); bottom:1.1rem;
  width:66%; height:26px; z-index:-1;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
  filter:blur(11px); }
@media (max-width:520px){ .book3d-it{ transform:rotateX(3deg) rotateY(-20deg); } }
@media (prefers-reduced-motion:reduce){
  .book3d-it{ transition:none; }
}

/* ---- Flipbook chapter jump-nav ------------------------------------------- */
.flip-toc{ display:flex; flex-wrap:wrap; justify-content:center; gap:.42rem;
  max-width:760px; margin:0 auto 1.1rem; }
.flip-toc a{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:.74rem;
  padding:.32rem .72rem; border:1px solid var(--hairline); border-radius:999px;
  color:var(--lead); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s; }
.flip-toc a:hover{ border-color:var(--accent); color:var(--heading); }
.flip-toc a:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.flip-toc a.here{ border-color:var(--accent); color:var(--onaccent); background:var(--accent); }