/* The open book. The document scrolls; the book stays put and turns its pages. */
.book-body { overflow-x: hidden; }
.scroll-space { width: 1px; }

.topbar {
  position: fixed; inset: 0 0 auto 0; height: 56px; z-index: 5;
  display: flex; align-items: center; gap: 18px; padding: 0 28px;
  font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted);
}
.brand { font: 500 19px/1 var(--serif); letter-spacing: 0; color: var(--strong); text-decoration: none; }
.crumb { text-transform: uppercase; position: relative; top: 2.5px; }   /* on the title's baseline: centring their boxes left it high */
.dots { margin-left: auto; display: flex; gap: 8px; }
.dots button {
  width: 22px; height: 22px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center;
}
.dots button::after { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--mid); transition: background .3s; }
.dots button[aria-current="true"]::after { background: var(--hi); border-color: var(--hi); }

.book {
  position: fixed; left: 50%; top: calc(50% + 18px); transform: translate(-50%, -50%);
  width: min(1440px, 96vw); height: min(880px, calc(100vh - 100px));
  display: grid; grid-template-columns: minmax(360px, 0.82fr) 1.18fr;
  perspective: 2600px;
}
.page { position: relative; background: var(--card); overflow: hidden; }
.page.left { border-radius: 14px 3px 3px 14px; box-shadow: var(--lift); padding: 54px 56px 64px; }
/* opening, the left page swings out from under the cover, about the spine (engine/cover.js) */
.page.left { backface-visibility: hidden; transform-origin: 100% 50%; }
.page.right { border-radius: 3px 14px 14px 3px; box-shadow: var(--lift); }
.spine {
  position: absolute; top: 0; bottom: 0; left: calc(41% - 0px); width: 60px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.035) 45%, rgba(0,0,0,.06) 50%, rgba(0,0,0,.025) 56%, transparent);
}

/* ---- left page: the text ---- */
.sheet { max-width: 520px; }
.kicker { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.sheet h1, .plate h1 { font: 400 clamp(40px, 4.2vw, 62px)/1 var(--serif); color: var(--strong); margin: 18px 0 6px; letter-spacing: -.01em; }
.sheet .sub, .plate .sub { font: italic 400 clamp(20px, 1.8vw, 26px)/1.2 var(--serif); color: var(--muted); margin-bottom: 26px; }
.sheet p, .plate p { margin: 0 0 14px; max-width: 62ch; }
.sheet p.lede { font: 400 19px/1.45 var(--serif); color: var(--strong); }
.sheet i { font-family: var(--serif); font-size: 1.08em; }
.data { border-collapse: collapse; margin: 6px 0 16px; font: 13px/1.4 var(--mono); width: 100%; max-width: 440px; }
.data th { font-weight: 400; color: var(--muted); text-align: left; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--faint); }
.data td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--faint); color: var(--hi); font-variant-numeric: tabular-nums; }
.eq { font: 400 26px/1.3 var(--serif); color: var(--strong); padding: 4px 0 4px 16px; border-left: 1px solid var(--mid); margin: 6px 0; }
.charts { display: grid; gap: 8px; margin-top: 18px; max-width: 440px; }
.chart { width: 100%; height: auto; display: block; }
.chart .frame { fill: none; stroke: var(--faint); stroke-width: 1; }
.chart .grid { stroke: var(--faint); stroke-width: .6; stroke-dasharray: 2 3; }
.chart .zero { stroke: var(--lo); stroke-width: .8; }
.chart .curve { fill: none; stroke: var(--hi); stroke-width: 1.6; }
.chart .trend { fill: none; stroke: var(--hi); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .bar { fill: #ecece8; stroke: var(--mid); stroke-width: .8; }
.chart .cursor { fill: var(--lit); stroke: var(--card); stroke-width: 2; }
.chart text { font: 10.5px var(--mono); fill: var(--muted); }
.chart .lab { fill: var(--hi); font-size: 11.5px; }
.folio {
  position: absolute; left: 56px; right: 56px; bottom: 24px; display: flex; justify-content: space-between;
  font: italic 14px var(--serif); color: var(--muted);
}

/* ---- plate: a part taken apart ---- */
.plate { position: absolute; inset: 0; background: var(--card); padding: 54px 56px 64px; overflow: auto; animation: plateIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes plateIn { from { opacity: 0; transform: translateY(10px); } }
.plate .close {
  position: absolute; top: 46px; right: 44px; border: 1px solid var(--faint); background: var(--card); color: var(--hi);
  font: 500 12px var(--mono); letter-spacing: .06em; padding: 8px 12px; border-radius: 999px; cursor: pointer;
}
.plate .close:hover { border-color: var(--mid); }
.parts { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 2px; max-width: 440px; }
.parts button {
  width: 100%; display: flex; gap: 14px; align-items: baseline; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 6px; font: 15px var(--sans); color: var(--text);
}
.parts button span { font: 12px var(--mono); color: var(--muted); }
.parts button:hover, .parts button:focus-visible { background: #f0f0ec; color: var(--strong); }

/* ---- right page: the figure card ---- */
.figure { position: absolute; inset: 0; }
#gl { width: 100%; height: 100%; display: block; cursor: default; touch-action: pan-y; }
#gl { cursor: grab; }
#gl.pointing { cursor: pointer; }
#gl.dragging { cursor: grabbing; }
.corner { position: absolute; font: 12px/1.5 var(--mono); color: var(--muted); pointer-events: none; }
.corner.tl { top: 22px; left: 26px; letter-spacing: .04em; }
.corner.tr { top: 18px; right: 26px; font: italic 19px/1.3 var(--serif); color: var(--hi); text-align: right; }
.corner.bl { bottom: 22px; left: 26px; }
.corner.br { bottom: 20px; right: 26px; text-align: right; color: var(--hi); font-variant-numeric: tabular-nums; white-space: pre; }

/* ---- the turning leaf ---- */
.leaf {
  position: absolute; top: 0; bottom: 0; left: 41%; right: 0; transform-origin: left center; transform-style: preserve-3d;
  pointer-events: none; visibility: hidden;
}
.leaf-front, .leaf-back { position: absolute; inset: 0; backface-visibility: hidden; background: var(--card); overflow: hidden; }
.leaf-front { border-radius: 3px 14px 14px 3px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 22px 26px; font: italic 19px var(--serif); color: var(--lo); }
/* the leaf is as wide as the right page; once turned, only its left-page-sized part is paper */
.leaf-back { transform: rotateY(180deg); border-radius: 14px 3px 3px 14px; padding: 54px 56px 64px calc(30.5% + 56px);
  background: linear-gradient(90deg, transparent 30.5%, var(--card) 30.5%); }
.leaf-shade { position: absolute; inset: 0; pointer-events: none; }
.leaf-back .folio { left: 30.5%; right: 0; bottom: 0; padding: 26px 56px 24px; background: linear-gradient(rgba(251,251,250,0), var(--card) 45%); }

.scroll-cue { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); font: 12px var(--mono); color: var(--muted); letter-spacing: .06em; transition: opacity .6s; }

/* ---- small screens: figure on top, text underneath, no leaf ---- */
@media (max-width: 900px) {
  .book { grid-template-columns: 1fr; grid-template-rows: 52% 48%; width: calc(100vw - 24px); height: calc(100vh - 76px); top: calc(50% + 22px); }
  .page.right { grid-row: 1; border-radius: 14px 14px 3px 3px; }
  .page.left { grid-row: 2; border-radius: 3px 3px 14px 14px; padding: 22px 20px 44px; overflow: auto; }
  .plate { padding: 22px 20px 44px; }
  .plate .close { top: 16px; right: 16px; }
  .leaf, .spine, .scroll-cue { display: none; }
  .folio { display: none; }
  .folio { left: 20px; right: 20px; bottom: 12px; }
  .sheet h1 { margin-top: 10px; }
  .corner.tr { font-size: 16px; }
  .corner.bl { display: none; }
  .topbar { padding: 0 14px; }
  .crumb { display: none; }
}
@media (prefers-reduced-motion: reduce) { .plate { animation: none; } }

.plate .kicker { margin-top: 4px; }
.plate .data td:first-child { color: var(--muted); }

.leaf-front::after, .leaf-back::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.leaf-front::after { background: linear-gradient(90deg, rgba(0,0,0,var(--shade, 0)), transparent 40%); }
.leaf-back::after { background: linear-gradient(270deg, rgba(0,0,0,var(--shade, 0)), transparent 30%); left: 30.5%; }

/* ---- kinematics additions ---- */
.rules { margin: 4px 0 16px; padding-left: 18px; max-width: 440px; }
.rules li { margin: 4px 0; color: var(--strong); }
.live { font: 13px var(--mono); color: var(--hi); min-height: 1.4em; }
.hintline { font: 12px var(--mono); color: var(--muted); letter-spacing: .03em; }
.data.cols td, .data.cols th { width: 50%; vertical-align: top; }
.data.eqs td:first-child { font: 17px var(--serif); color: var(--strong); }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; transition: opacity .25s; }
.lbl.vec { font: italic 22px/1 var(--serif); color: var(--hi); }
.lbl.vec.red { color: var(--red); }
.lbl.tick { font: 11px/1 var(--mono); color: var(--muted); transform: translate(-100%, -50%); }
.lbl.board { font: italic 17px/1 var(--serif); color: var(--hi); transform: translate(0, -50%); }
.lbl.axis { font: italic 15px/1 var(--serif); color: var(--muted); transform: translate(-100%, -50%); }
.chart .mark { fill: var(--hi); }
.chart .lab sub { font-size: 8px; }

.lbl.vec.blue { color: #3d63a8; }
.chart .total { stroke: #3d63a8; }

/* paused badge on the figure */
.paused {
  position: absolute; top: 18px; left: 50%; transform: translate(-50%, -4px); z-index: 2;
  display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hi);
  background: rgba(251,251,250,.92); box-shadow: 0 0 0 1px var(--faint), 0 2px 6px rgba(0,0,0,.05);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.paused.on { opacity: 1; transform: translate(-50%, 0); }
.paused .bars { width: 8px; height: 9px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .paused { transition: none; } }
.lbl.vec.grey { color: var(--mid); }

.lbl.mark { font: 15px/1 var(--serif); color: #86868c; }

/* a left page whose text runs long scrolls instead of being clipped */
@media (min-width: 901px) { .page.left { overflow-y: auto; scrollbar-width: thin; } }
/* the folio stays pinned at the bottom of a scrolling left page, over a soft fade, instead of riding over the text */
@media (min-width: 901px) {
  .page.left { padding-bottom: 0; }
  .page.left .folio {
    position: sticky; bottom: 0; left: auto; right: auto;
    margin: 18px -56px 0; padding: 26px 56px 24px;
    background: linear-gradient(rgba(251,251,250,0), var(--card) 45%);
  }
}
@media (min-width: 901px) { .page.left { display: flex; flex-direction: column; } .page.left > .sheet { flex: 1 0 auto; } }

/* ---- compare: analogies with other chapters ---- */
.xref { margin: 22px 0 6px; padding: 12px 0 2px 16px; border-left: 2px solid #3d63a8; max-width: 62ch; }
.xref p { margin: 8px 0 10px; font-size: 15px; }
.xref a { color: #3d63a8; text-decoration: none; font-weight: 500; white-space: nowrap; }
.xref a:hover { text-decoration: underline; }

/* ---- practice: AP-style questions under each page ---- */
.practice { margin: 30px 0 8px; padding-top: 18px; border-top: 1px solid var(--faint); max-width: 62ch; }
.practice .q { margin: 14px 0 22px; }
.practice .qtext { color: var(--strong); }
.practice .qn { display: inline-block; min-width: 22px; font: 500 12px var(--mono); color: var(--muted); }
.choices { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.choices button {
  width: 100%; display: flex; gap: 12px; align-items: baseline; text-align: left; cursor: pointer;
  border: 1px solid var(--faint); background: var(--card); border-radius: 8px; padding: 9px 12px;
  font: 15px/1.4 var(--sans); color: var(--text);
}
.choices button:hover:not(:disabled) { border-color: var(--mid); color: var(--strong); }
.choices button:disabled { cursor: default; }
.choices .letter { font: 500 12px var(--mono); color: var(--muted); }
.choices button.right { border-color: #2f8f5b; background: #eef7f1; color: var(--strong); }
.choices button.right .letter { color: #2f8f5b; }
.choices button.wrong { border-color: var(--red); background: #fcefef; }
.choices button.wrong .letter { color: var(--red); }
.practice .reveal {
  margin-top: 6px; border: 1px solid var(--faint); background: var(--card); color: var(--hi); cursor: pointer;
  font: 500 12px var(--mono); letter-spacing: .06em; padding: 8px 12px; border-radius: 999px;
}
.practice .reveal:hover { border-color: var(--mid); }
.practice .why { margin-top: 10px; padding: 10px 0 2px 16px; border-left: 1px solid var(--mid); font-size: 15px; }
.practice .why p { margin: 0 0 8px; }
.practice .why .eq { font-size: 20px; }

/* ---- small screens: on to the next page from the end of this one ---- */
.turn { display: none; }
@media (max-width: 900px), (max-height: 520px) {
  .turn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; max-width: 62ch; margin: 26px 0 4px;
    padding: 16px 18px; border: 1px solid var(--faint); border-radius: 12px; background: var(--card); cursor: pointer;
    font: 400 21px/1.2 var(--serif); color: var(--strong); text-align: left;
  }
  .turn:active { border-color: var(--mid); }
}

/* ---- top bar: pager (small screens) and the equation sheet ---- */
.pager { display: none; align-items: center; gap: 4px; margin-left: auto; font: 500 12px var(--mono); color: var(--hi); }
.pager button { width: 36px; height: 36px; border: 0; background: none; font: 400 22px/1 var(--serif); color: var(--hi); cursor: pointer; border-radius: 50%; }
.pager button:hover { background: #f0f0ec; }
.eqlink { font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); text-decoration: none; text-transform: uppercase; }
.eqlink:hover { color: var(--strong); }
.gh { display: flex; color: var(--muted); }
.gh:hover { color: var(--strong); }

/* ---- phones and tablets ---- */
.book { height: min(880px, calc(100dvh - 100px)); }
@media (max-width: 1100px) and (min-width: 901px) {
  /* small laptops and tablets on their side: tighter margins, smaller headings */
  .book { width: calc(100vw - 32px); grid-template-columns: minmax(330px, 0.85fr) 1.15fr; }
  .page.left, .plate { padding-left: 36px; padding-right: 36px; }
  .leaf-back { padding-left: calc(30.5% + 36px); padding-right: 36px; }
  .leaf-back .folio { padding-left: 36px; padding-right: 36px; }
  @media (min-width: 901px) { .page.left .folio { margin-left: -36px; margin-right: -36px; padding-left: 36px; padding-right: 36px; } }
  .dots { gap: 2px; }
  .dots button { width: 18px; }
}
@media (max-width: 900px) {
  .dots { display: none; }
  .pager { display: flex; }
  .eqlink { order: 3; }
  .gh { order: 4; }
  .topbar { gap: 12px; }
  .brand, #pagenum { white-space: nowrap; }
  .pager button { width: 32px; }
  .book { height: calc(100dvh - 68px); top: calc(50% + 26px); }
  .page.left { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sheet h1, .plate h1 { font-size: clamp(32px, 8vw, 44px); }
  .sheet .sub, .plate .sub { font-size: 19px; margin-bottom: 16px; }
  .sheet p.lede { font-size: 17px; }
  .eq { font-size: 21px; }
  .corner.tl { top: 12px; left: 14px; }
  .corner.tr { top: 10px; right: 14px; max-width: 60%; }
  .corner.br { bottom: 10px; right: 14px; font-size: 11px; }
  .paused { top: 40px; }
  .data { font-size: 12px; }
  .choices button { padding: 11px 12px; }
  .eq { overflow-x: auto; }
  .pager button { height: 44px; }
  /* no hover on a phone: say what the figure does, under its number */
  .corner.bl { display: block; top: 32px; bottom: auto; left: 14px; max-width: 40%; font-size: 11px; line-height: 1.4; }
  .corner.tr { max-width: 55%; }
  .lbl.vec { font-size: 19px; }
}
/* phones upright: more of the screen for the text, which is what is read */
@media (max-width: 599px) {
  .book { grid-template-rows: 42% 58%; width: calc(100vw - 16px); }
  .page.left, .plate { padding: 20px 18px 36px; }
  .sheet h1, .plate h1 { font-size: clamp(30px, 8.5vw, 38px); }
  .sheet p, .plate p { font-size: 16px; line-height: 1.6; }
}
@media (max-width: 400px) {
  .topbar { gap: 8px; }
  .brand { font-size: 17px; }
  .pager button { width: 28px; }
}
@media (max-width: 340px) {
  .gh { display: none; }   /* the smallest phones: the contents page still links the repo */
  .pager button { width: 24px; }
}
/* tablets upright: a taller figure, roomier text */
@media (max-width: 900px) and (min-width: 600px) {
  .book { grid-template-rows: 55% 45%; }
  .page.left, .plate { padding: 28px 36px 40px; }
}
/* phones on their side: figure and text side by side, no flip */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { height: 40px; }
  .book { grid-template-columns: 0.9fr 1.1fr; grid-template-rows: none; width: calc(100vw - 16px); height: calc(100dvh - 48px); top: calc(50% + 20px); }
  .page.right { grid-row: auto; grid-column: 2; border-radius: 3px 14px 14px 3px; }
  .page.left { grid-row: auto; grid-column: 1; border-radius: 14px 3px 3px 14px; padding: 16px 20px 30px; overflow: auto; overscroll-behavior: contain; }
  .plate { padding: 16px 20px 30px; }
  .page.left .folio { display: none; }
  .leaf, .spine, .scroll-cue, .crumb, .dots { display: none; }
  .pager { display: flex; }
  .sheet h1, .plate h1 { font-size: 30px; margin-top: 8px; }
  .sheet .sub, .plate .sub { font-size: 17px; margin-bottom: 12px; }
  .corner.bl { display: none; }
}
/* the hint and the readout share the figure's bottom edge; on narrower figures the hint gives way */
@media (max-width: 1240px) and (min-width: 901px) { .corner.bl { display: none; } }
/* fingers: each swipe lands on a whole page */
@media (pointer: coarse) { html { scroll-snap-type: y mandatory; } .scroll-space > div { scroll-snap-align: start; } }

/* ---- economics labels ---- */
.lbl.card { font: 500 13px/1 var(--mono); color: var(--strong); font-variant-numeric: tabular-nums; }
.lbl.small { font: 11px/1 var(--mono); color: var(--hi); letter-spacing: .02em; }
.lbl.red { color: var(--red); }
.lbl.blue { color: #3d63a8; }
.lbl.tick.red { color: var(--red); transform: translate(-50%, -50%); }
.lbl.board { transform: translate(-50%, -50%); }
.lbl.axisl { font: italic 15px/1 var(--serif); color: var(--muted); transform: translate(0, -50%); }

/* phones: the figure is small; the hint is not needed there */
@media (max-width: 599px) { .corner.bl { display: none !important; } }

/* ---- the figure's annotations in the teacher's hand ---- */
.lbl.vec { font: 26px/1 var(--hand); color: var(--hi); }
.lbl.vec sub { font-size: 15px; vertical-align: baseline; position: relative; top: .35em; }
.lbl.mark { font: 19px/1 var(--hand); color: #6e6e74; }
.lbl.small { font: 15px/1.1 var(--hand); color: var(--hi); letter-spacing: 0; }
.lbl.smalll { font: 15px/1.1 var(--hand); }
.lbl.board { font: 20px/1 var(--hand); color: var(--hi); }
.lbl.axis, .lbl.axisl { font: 16px/1 var(--hand); color: var(--muted); }
.lbl.card { font: 17px/1 var(--hand); color: var(--strong); font-variant-numeric: normal; }
.lbl.tick.red { font: 14px/1 var(--hand); }
@media (max-width: 900px) { .lbl.vec { font-size: 21px; } .lbl.small { font-size: 13px; } }