:root {
  --ink: #1a1a2e;
  --muted: #334155;
  --paper: #ffffff;
  --wash: #eef4f8;
  --line: #c5d4de;
  --navy: #3d6b8a;
  --navy-deep: #2a4d66;
  --gold: #c9a227;
  --gold-soft: #f4e7bc;
}

html { background: var(--wash); }
body {
  margin: 0 auto;
  max-width: 1240px;
  padding: 22px 28px 64px;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 Arial, Helvetica, sans-serif;
}

header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 3px solid var(--navy);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.header-copy { flex: 1; min-width: 0; }
.kicker {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--navy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; color: var(--ink); }
h2 { margin: 32px 0 10px; font-size: 20px; color: var(--navy-deep); }
h3 { margin: 0 0 6px; font-size: 17px; }
.lede, .note, footer, li { color: var(--muted); }
.lede { margin: 0; }
.ver {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  margin-left: 8px;
}

a { color: #1d4f70; }
a:hover { color: #0f2f44; }

#ask-ace-btn,
.play-btn {
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  border: 0;
  cursor: pointer;
}
#ask-ace-btn {
  background: #8B4513;
  color: #fff;
  padding: 12px 18px;
  border-radius: 4px;
  flex-shrink: 0;
}
#ask-ace-btn:hover { background: #6e360f; }
#ask-ace-hidden { display: none; }

.email-gate {
  display: none;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  background: #fffdf4;
}
.email-gate.open { display: block; }
.email-gate label { display: block; font-weight: 700; margin-bottom: 8px; }
.email-gate input {
  width: 280px;
  max-width: 100%;
  padding: 8px 10px;
  font: 15px Arial, Helvetica, sans-serif;
  border: 1px solid var(--line);
}
.email-gate button {
  margin-left: 8px;
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 9px 14px;
  font: 700 14px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.email-gate .err { color: #9b1c1c; margin: 8px 0 0; }

/* The card a chapter is. Its size, its place and how much of it the cover takes are all
   set by .chapter-row below, which is the only thing that shows one. */
.ch-card {
  border: 1px solid var(--line);
  background: #f7fafc;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  padding: 0;
  overflow: hidden;
}
.ch-card:hover { color: var(--ink); border-color: var(--navy); }
.ch-card .thumb {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  object-position: top;
  background: var(--navy);
}
.ch-card .soon {
  display: block;
  height: 72px;
  background: linear-gradient(160deg, #4a7a99, #2a4d66);
}
.ch-card .meta {
  display: block;
  padding: 6px 7px 8px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
}
.ch-card .meta span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.ch-card.live { border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--gold-soft); }
.ch-card.current { outline: 2px solid var(--navy); outline-offset: 1px; }

/* The chapter row stands the chapters up as the pages they are and turns them under the
   hand. The front page and every chapter page both show it. The front page used to have
   a flat strip of its own instead, which gave the cover a 72px band across the top of a
   118px card - and since the top of a chapter's opening page is its blank margin, every
   card on the shelf opened with a white gap. */
.chapter-row {
  position: relative;
  height: 300px;
  margin: 10px 0 12px;
  background: linear-gradient(180deg, #eef3f8 0%, #dbe5ef 62%, #cdd9e6 100%);
  border: 1px solid #c3cfdc;
  border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  /* A vertical swipe still scrolls the page; only the sideways drag is claimed. */
  touch-action: pan-y;
  user-select: none;
}
.chapter-row.dragging { cursor: grabbing; }
.ch-wheel { position: absolute; left: 50%; top: 48%; width: 0; height: 0; perspective: 1600px; }
/* The base card clips to itself so a cover cannot spill out of it. On the row the cover is
   cropped by its own object-fit instead, and the clip has to come off, or it cuts the
   bookmark's overhang at the top and the flags' overhang at the fore edge - which is the
   whole point of both of them. */
.chapter-row .ch-card {
  position: absolute;
  flex: none;
  overflow: visible;
  width: 148px;
  height: 210px;
  min-height: 0;
  margin-left: -74px;
  margin-top: -105px;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 3px;
  box-shadow: 0 14px 28px rgba(20, 40, 70, .30);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.22, .8, .24, 1), opacity .52s ease;
}
/* While the pointer is down the cards sit exactly where the hand is. Left on, every
   frame of the drag would start a new half-second animation and the row would trail
   behind the cursor. */
.ch-wheel.live .ch-card { transition: none; }
.chapter-row .ch-card:not(.live) { background: var(--navy); border-color: #d5dde8; }
.chapter-row .ch-card .thumb {
  /* The card is a fixed height, so the picture takes what is left after the words are
     given room for the longest chapter title in the book. Give the picture more and a
     long title runs off the bottom edge, where overflow:hidden cuts it through the
     middle of the letters - which is what "Opportunities Management" was doing. */
  height: 128px;
}
.chapter-row .ch-card .soon { height: 128px; }
.chapter-row .ch-card .meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78px;
  padding: 6px 8px 7px;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 800;
}
.chapter-row .ch-card .meta span {
  /* Three lines then an ellipsis. "Understanding the Role of Marketing and Sales" is
     four lines at this width, and a title must never decide the card's height. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
  margin-top: 2px;
}
.chapter-row .ch-card:not(.live) .meta,
.chapter-row .ch-card:not(.live) .meta span { color: #fff; }
.chapter-row .ch-card.face { box-shadow: 0 20px 40px rgba(20, 40, 70, .42); }
.chapter-row .ch-card.current { border-color: #1a6b2f; border-width: 3px; outline: 0; }
/* A recorded chapter's card is its cover and nothing else. The picture says which
   chapter it is, and the line under the row names whichever one is facing, so the
   caption was only ever repeating them - and it was the one thing forcing the picture
   into 128px of a 210px card. */
/* The card's own corners are rounded and it no longer clips, so the cover rounds its own. */
.chapter-row .ch-card.art .thumb { height: 100%; border-radius: 2px; }
/* The house rule `audio, video, img { margin: 10px 0 }` applies to these covers too, and on
   a card it pushed the picture 10px down the frame and left a white strip across the top -
   which is what was showing above the book's own jacket. A cover is the whole face of its
   card and owns every edge of it. */
.chapter-row .ch-card .thumb { margin: 0; }
/* A chapter card shows its opening page whole, margins and folio and all, because that is
   what a chapter looks like when you turn to it. It was cropped to its type area with a dark
   foot beneath for one deploy: JP had asked for that treatment on the front-matter card, the
   one with the white strip, and it should never have been carried across to the chapters -
   they were right as they were. If a foot is ever wanted on a card again, it is the card's
   BACKGROUND and never a pseudo-element: a pseudo-element does not follow a preserve-3d
   parent's rotation, so every card away from the front showed a flat black rectangle laid
   across a sheared page. */
/* Two cards keep a caption, for opposite reasons. The front matter's cover is the
   book's own, so its picture says which book this is rather than which part of it. A
   chapter not recorded yet has no cover at all, and six unnamed navy blanks is not a
   shelf. */
.chapter-row .ch-card.opening .thumb { height: 100%; }
.chapter-row .ch-card.opening .meta {
  /* Over the foot of the jacket rather than below it, so the cover keeps the whole
     card. The same dark the chapters carry, and solid rather than washed over the
     artwork, so the shelf has one foot along it instead of two shades of one.

     28px, and the number is not free. The jacket is 327x448 and fits the 210px card
     at 0.46875, so a pixel of band covers just over two rows of artwork. The word
     SALES ends at row 381, which is card y 178.6 - a 34px band started at 176 and
     took the bottom of the letters with it. 28 starts at 182 and leaves the word
     whole with a little air under it. If the card height ever changes, work this
     out again rather than keeping the 28. */
  height: 28px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  color: #fff;
  font-size: 12px;
  letter-spacing: .02em;
}
/* A bookmark hanging off a chapter this listener has already started, carrying the page
   they stopped on. Over the cover's top edge on the right, where a ribbon sits in a book,
   and clear of the green border the chapter being read carries on its left. It is a child
   of the card rather than a pseudo-element, so it turns with the card instead of lying
   flat across it. */
.chapter-row .ch-card .mark {
  position: absolute;
  top: -5px;
  right: 12px;
  min-width: 30px;
  padding: 7px 4px 10px;
  background: #1a6b2f;
  color: #fff;
  font: 800 11px/1 "JetBrains Mono", Consolas, monospace;
  text-align: center;
  letter-spacing: .02em;
  /* The notch in the tail, which is what makes it read as a bookmark rather than a badge. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  box-shadow: 0 2px 6px rgba(20, 40, 70, .38);
  cursor: pointer;
}
/* A chapter read to the end holds a tick rather than a page. It is still the same ribbon and
   still comes out when it is clicked - which is how you say you are starting the chapter
   again - so it keeps the shape and only the face of it changes. */
.chapter-row .ch-card .mark.done { font-size: 13px; padding-top: 6px; }

/* A place bookmarked earlier in the book and since passed. Paler, because it is history
   rather than where the listener is, and it has to be obvious at a glance which ribbons are
   the trail and which one is now. Same shape: it is the same bookmark, on an older day.
   Only drawn while the trail is switched on. */
.chapter-row .ch-card .mark.past {
  background: #8cc39c;
  color: #10361c;
  box-shadow: 0 1px 4px rgba(20, 40, 70, .22);
}

/* The spots this listener flagged, down the fore edge of the card the way post-its stick out
   of a book. Yellow, because the ribbon at the top is green and the two marks mean different
   things: the ribbon is where you stopped, a flag is somewhere you meant to come back to. */
/* Behind the card, not on it. translateZ takes the column a hair further from the viewer
   than the cover, so the cover hides the part of each tab that would be inside the book and
   only the stub past the fore edge shows - which is what a flag in a closed book looks like.
   Nothing is lost by being hidden: the text is set against the outer edge below. */
.chapter-row .ch-card .flags {
  position: absolute;
  /* Below the chapter numeral the covers carry in their top right corner. */
  top: 58px;
  right: -32px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  transform: translateZ(-1px);
}
/* The page over the word rather than beside it, which is what keeps a tab narrow enough to
   read as a stub. Eight of its forty pixels sit behind the cover, so both lines are set
   against the outer edge where they are visible, and only the outer corners are rounded -
   the inner edge is the page cutting across it. */
.chapter-row .ch-card .flag {
  display: block;
  width: 40px;
  padding: 2px 4px 3px 0;
  background: #f6d04b;
  border-radius: 0 3px 3px 0;
  color: #1a1a2e;
  text-align: right;
  text-decoration: none;
  overflow: hidden;
}
.chapter-row .ch-card .flag b {
  display: block;
  font: 800 9px/1.1 "JetBrains Mono", Consolas, monospace;
}
.chapter-row .ch-card .flag i {
  display: block;
  font: 600 7px/1.2 Arial, Helvetica, sans-serif;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chapter-row .ch-card .flag:hover { background: #ffe680; }
/* The tab that stands for the flags there was no room for. It opens the chapter, whose own
   list carries all of them. */
.chapter-row .ch-card .flag.more {
  font: 800 9px/1.9 "JetBrains Mono", Consolas, monospace;
  background: #e8e2cf;
  color: #3a3520;
}
/* The arrows on the row's own edges. Light enough to stay out of the way of the chapters and
   dark enough to be seen without being looked for: the glyph measures 4.6:1 against the pill
   over the row's gradient, which clears AA for text and is comfortable for something this
   size. They fade out during a drag, because a hand already turning the row does not need
   to be shown how. */
.chapter-row .ch-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.6);
  color: #1f3a57;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.chapter-row .ch-arrow.left { left: 10px; }
.chapter-row .ch-arrow.right { right: 10px; }
.chapter-row .ch-arrow:hover { opacity: 1; background: rgba(255, 255, 255, 0.92); }
.chapter-row .ch-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; opacity: 1; }
.chapter-row .ch-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chapter-row.dragging .ch-arrow { opacity: 0; }

.ch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-bar button {
  font: 700 13px Arial, Helvetica, sans-serif;
  background: var(--navy-deep, #1a1a2e);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
}
.ch-bar button:hover { background: #2c2c48; }
/* A day on the reading trail. Smaller than the section headings around it, because a day is
   a divider inside one list rather than a section of the page. */
.trail-day {
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 22px 0 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
}
.trail-day:first-child { margin-top: 6px; }

/* The switch that brings the older bookmarks onto the shelf. Last on the bar and quieter
   than the two buttons: it changes what the row is showing rather than moving it, and most
   visits do not want it. */
.ch-trail {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 13px Arial, Helvetica, sans-serif;
  color: var(--muted);
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
}
.ch-trail input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.ch-trail:hover { color: var(--ink); }
.ch-facing { margin: 0; font-size: 15px; font-weight: 700; }
.ch-facing span { font-weight: 600; color: var(--muted); }
.ch-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.fold-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}
.fold-toolbar button {
  font: 700 13px Arial, Helvetica, sans-serif;
  background: #fff;
  color: var(--navy-deep);
  border: 1px solid var(--line);
  padding: 8px 12px;
  cursor: pointer;
}
.fold-toolbar button:hover { background: #eef4f8; }
.fold-toolbar button span { margin-right: 4px; }

.section-header-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #eef4f8;
  border: 1px solid var(--line);
  cursor: pointer;
  margin: 0 0 8px;
}
.section-header-collapsible:hover { background: #e0ebf2; }
.section-header-collapsible h2 {
  margin: 0;
  font-size: 18px;
}
.spinner-icon {
  transition: transform 0.3s;
  font-size: 14px;
  color: var(--navy-deep);
  line-height: 1;
}
.spinner-icon.collapsed { transform: rotate(-90deg); }
.section-content { padding: 0 0 12px; }
.fold { margin: 0 0 10px; }

.now-playing {
  margin: 8px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #f7fafc;
}
.now-playing h2 { margin: 0 0 8px; }
.now-meta { margin: 0 0 10px; color: var(--muted); }
#episodeAudio { width: 100%; margin: 0; }

.player-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 4px 10px 6px;
  background: #fff;
  border: 1px solid var(--line);
  color: #1a1a2e;
  font: 700 13px Arial, Helvetica, sans-serif;
}
.speed-scale {
  display: flex;
  flex-direction: column;
  width: 210px;
}
.speed-control input[type="range"] {
  width: 210px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}
.speed-ticks {
  position: relative;
  height: 14px;
  margin-top: 2px;
  font: 700 11px Arial, Helvetica, sans-serif;
  color: #1a1a2e;
}
.speed-tick {
  position: absolute;
  top: 0;
}
.speed-tick-start { left: 0; }
.speed-tick-one {
  left: 23.08%;
  transform: translateX(-50%);
}
.speed-tick-end { right: 0; }
#playSpeedVal {
  min-width: 2.6em;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
}
.player-nav button,
.pdf-toolbar button {
  font: 700 13px Arial, Helvetica, sans-serif;
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
}
.player-nav button:hover,
.pdf-toolbar button:hover { background: var(--navy-deep); }
.player-nav button:disabled,
.player-nav button:disabled:hover {
  background: #9aa8b3;
  color: #f4f7fa;
  cursor: default;
}

/* Saving your place, on the transport row at the far end of it, so the row reads across as
   move, speed, mark. Gold rather than the navy of the episode buttons: these two mark the
   book, they do not drive the player, and the colour is the one every other marking button
   on the page already uses. */
.player-nav .mark-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.player-nav .mark-inline button {
  font: 700 13px/1 Arial, Helvetica, sans-serif;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  border-radius: 4px;
  padding: 9px 14px;
  white-space: nowrap;
}
.player-nav .mark-inline button:hover { background: #dcb43a; }
.player-nav .mark-inline button.secondary {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}
.player-nav .mark-inline button.secondary:hover { background: #eef4f9; }
/* Held down for the second it takes to save. Measured at 5.7:1, because a button that says
   "Saving..." still has to be readable while it says it. */
.player-nav .mark-inline button:disabled,
.player-nav .mark-inline button:disabled:hover {
  background: #e2d7a8;
  border-color: #cbbf90;
  color: #574f33;
  cursor: default;
}
.player-nav .mark-inline .said { color: #1c6b3a; font-size: 13px; }
.listen-stage { margin: 0 0 8px; }
.pdf-stage {
  border: 1px solid var(--line);
  background: #f4f7fa;
}
.pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #eef4f8;
}
.pdf-toolbar #pdfMeta {
  font-weight: 700;
  color: var(--navy-deep);
  margin-right: auto;
}
.pdf-jump {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.pdf-jump label {
  font: 700 13px Arial, Helvetica, sans-serif;
  color: var(--navy-deep);
}
.pdf-jump input {
  width: 4.6em;
  font: 700 13px Arial, Helvetica, sans-serif;
  color: #1a1a2e;
  background: #fff;
  border: 1px solid var(--line);
  padding: 7px 8px;
}
#pdfJumpErr {
  flex-basis: 100%;
  margin: 0;
  color: #9b1c1c;
  font-weight: 700;
}
.pdf-view {
  width: 100%;
  overflow: auto;
  background: #d8e0e6;
  min-height: 640px;
}
.pdf-stack {
  position: relative;
  width: 100%;
}
#pdfCanvas,
#pdfHighlight {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
#pdfCanvas { background: #fff; }
#pdfHighlight {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.episode-table tr.ep-row { cursor: pointer; }

.stage-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.stage-tools button {
  font: 700 13px Arial, Helvetica, sans-serif;
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
}
.stage-tools button:hover { background: var(--navy-deep); }
.stage-hint { font-size: 13px; color: var(--muted); }

.flicker {
  margin: 0 0 8px;
  width: 100%;
  height: 420px;
  min-width: 280px;
  min-height: 180px;
  max-width: 100%;
  border: 1px solid var(--line);
  background: #f4f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
  resize: both;
}
.flicker img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  flex: 1 1 auto;
  object-fit: contain;
  margin: 0;
  border: 0;
  background: #fff;
}

body.pop-out {
  max-width: none;
  padding: 12px 16px 20px;
}
body.pop-out .main-only,
body.pop-out .email-gate,
body.pop-out #ask-ace-btn {
  display: none;
}
body.pop-out .pdf-view {
  min-height: calc(100vh - 280px);
}
.flicker .cap {
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.flicker .empty {
  margin: 0;
  padding: 36px 20px;
  color: var(--muted);
  text-align: center;
}

.episode-table { width: 100%; border-collapse: collapse; }
.episode-table th,
.episode-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.episode-table th {
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.episode-table tr.playing td { background: #e8f3ea; }
.episode-table .pages,
.episode-table .dur { white-space: nowrap; color: var(--muted); width: 1%; }
.play-btn {
  background: var(--navy);
  color: #fff;
  padding: 8px 14px;
  border-radius: 3px;
}
.play-btn:hover { background: var(--navy-deep); }

#hold-to-talk {
  background: #2a2a2a;
  color: #fff;
  border: 0;
  padding: 10px 14px;
  font: 700 14px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
#hold-to-talk.hot { background: #8B4513; }

section { margin: 0 0 8px; }
.companion article {
  margin: 16px 0 24px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.pdf-row { margin: 0 0 8px; }
.pdf {
  width: 100%;
  height: 420px;
  border: 1px solid var(--line);
  background: var(--wash);
}

audio, video, img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 10px 0;
}
video { background: #15263f; min-height: 200px; }
img { height: auto; }
img[src=""], img:not([src]) { display: none; }

ul { padding-left: 1.2em; }
footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }

/* ---- Sign-in, the listener's shelf, and the bookmark bar ----------------- */
/* Shared by /my-listening and every chapter page, so a bookmark row looks the
   same wherever it is read. Light mode only, and every pairing below clears
   WCAG AA against what it sits on. */

.signin {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafc;
  padding: 16px 18px;
  margin: 0 0 14px;
  max-width: 560px;
}
.signin h2 { margin: 0 0 6px; font-size: 17px; }
.signin p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.signin label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.signin input {
  font: 16px/1.4 Arial, Helvetica, sans-serif;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 280px;
  max-width: 100%;
  color: var(--ink);
  background: var(--paper);
}
.signin input.code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  letter-spacing: 6px;
  width: 170px;
  text-align: center;
  font-size: 20px;
}
.signin button {
  font: 700 15px/1 Arial, Helvetica, sans-serif;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 11px 18px;
  cursor: pointer;
  margin-left: 8px;
}
.signin button:hover { background: var(--navy-deep); }
.signin button.quiet {
  background: transparent;
  color: #1d4f70;
  text-decoration: underline;
  padding: 11px 4px;
  margin-left: 0;
}
.signin .err { color: #9b1c1c; font-size: 14px; margin: 10px 0 0; }
.signin .said { color: #1c6b3a; font-size: 14px; margin: 10px 0 0; }
.signin .who { font-size: 14px; color: var(--muted); margin: 0; }

/* One row on the shelf: a place in the book, not a time code. */
.shelf { list-style: none; margin: 0 0 8px; padding: 0; }
.shelf li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: 4px;
  padding: 11px 14px;
  margin: 0 0 8px;
  background: var(--paper);
}
.shelf li.done { border-left-color: #1c6b3a; }
/* Every row reads top to bottom in the same shape - what it is, where it is, what is
   there, then the buttons at the foot. Left to wrap on its own, a long episode title
   dropped the buttons onto a second line on some rows and not others. */
.shelf .where { order: 0; flex: 1 1 auto; font-weight: 700; color: var(--ink); }
/* When it was marked, or last played. Sits at the right of the title line, where there
   is room, rather than adding a fourth line to every row. */
.shelf .stamp {
  order: 0;
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.shelf .at { order: 1; flex-basis: 100%; color: var(--muted); font-size: 14px; }
/* Direct children only - inside .acts the buttons keep their own order, Go there first. */
.shelf li > .acts, .shelf li > .go, .shelf li > .drop { order: 3; }
/* A step on the reading trail. Two lines rather than three: the place sits beside the
   buttons instead of claiming a line of its own, because a trail is thirteen rows read down
   in one go and the same airiness that suits four rows makes thirteen a scroll. */
.shelf li.step { padding: 9px 12px; }
.shelf li.step .at { flex-basis: auto; }
.shelf li.step .go { padding: 7px 13px; }
.shelf li.step .drop { padding: 6px 10px; }

.shelf .said {
  order: 2;
  flex-basis: 100%;
  color: var(--ink);
  font-size: 15px;
  margin: 2px 0 0;
}
.shelf .go {
  margin-left: auto;
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 9px 15px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.shelf .go:hover { background: var(--navy-deep); color: #fff; }
.shelf .drop {
  font: 14px/1 Arial, Helvetica, sans-serif;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #9b1c1c;
  padding: 8px 11px;
  cursor: pointer;
}
.shelf .drop:hover { background: #fdf1f1; }
.shelf .acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.shelf .acts .go { margin-left: 0; }
.shelf .edit {
  font: 14px/1 Arial, Helvetica, sans-serif;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #1d4f70;
  padding: 8px 11px;
  cursor: pointer;
}
.shelf .edit:hover { background: #f2f7fb; }
.shelf .said.none { color: var(--muted); font-style: italic; }

/* Rewriting the description, in the row rather than on a page of its own. */
.shelf .note-edit {
  order: 2;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}
.shelf .note-edit textarea {
  flex-basis: 100%;
  font: 15px/1.45 Arial, Helvetica, sans-serif;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: var(--paper);
  min-height: 62px;
  resize: vertical;
}
.shelf .note-edit .keep {
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 9px 15px;
  cursor: pointer;
}
.shelf .note-edit .keep:hover { background: var(--navy-deep); }
.shelf .note-edit .quiet {
  font: 14px/1 Arial, Helvetica, sans-serif;
  background: transparent;
  border: 0;
  color: #1d4f70;
  text-decoration: underline;
  padding: 9px 2px;
  cursor: pointer;
}
.shelf .bar {
  order: 4;
  flex-basis: 100%;
  height: 6px;
  border-radius: 3px;
  background: #dde7ee;
  overflow: hidden;
  margin: 4px 0 0;
}
.shelf .bar i { display: block; height: 100%; background: var(--navy); }
.shelf li.done .bar i { background: #1c6b3a; }

/* Marking the spot, beside the player. */
.mark-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}
.mark-bar input {
  font: 15px/1.4 Arial, Helvetica, sans-serif;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  flex: 1 1 260px;
  min-width: 0;
  color: var(--ink);
  background: var(--paper);
}
.mark-bar button {
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.mark-bar button:hover { background: #dcb43a; }
.mark-bar .said { color: #1c6b3a; font-size: 14px; }
/* Leaving a remark is the quieter of the two, because bookmarking is what a listener
   does for themselves and a remark is a favour they are doing us. */
.mark-bar button.secondary {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}
.mark-bar button.secondary:hover { background: #eef4f9; }

/* Saying what you think, at the moment you think it. Opens under the player rather than
   in a dialog: a tester has one hand on the audio and a remark about what they just heard,
   and anything that covers the page loses the thing they were looking at. */
.remark-box {
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: 4px;
  background: #f7fafc;
  padding: 14px 16px;
  margin: 10px 0 0;
}
.remark-box h3 { margin: 0 0 4px; font-size: 16px; color: var(--ink); }
.remark-box .here {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
}
.remark-box label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.remark-box select {
  font: 15px/1.4 Arial, Helvetica, sans-serif;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  max-width: 520px;
  margin: 0 0 12px;
}
.remark-box textarea {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  max-width: 620px;
  min-height: 96px;
  resize: vertical;
  display: block;
  margin: 0 0 10px;
}
.remark-box .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.remark-box button {
  font: 700 15px/1 Arial, Helvetica, sans-serif;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 11px 18px;
  cursor: pointer;
}
.remark-box button:hover { background: var(--navy-deep); }
.remark-box button.quiet {
  background: transparent;
  color: #1d4f70;
  text-decoration: underline;
  padding: 11px 4px;
  font-weight: 400;
}
.remark-box .err { color: #9b1c1c; font-size: 14px; margin: 0; }
.remark-box .said { color: #1c6b3a; font-size: 14px; margin: 0; }
.remark-box .count { color: var(--muted); font-size: 13px; margin-left: auto; }

/* A remark on the shelf. Same row shape as a bookmark, plus what it is about and what
   was being read where it was left. */
.shelf .tag {
  order: 0;
  font: 700 12px/1 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #1d4f70;
  background: #e8f0f7;
  border: 1px solid #c8dbea;
  border-radius: 3px;
  padding: 4px 7px;
  white-space: nowrap;
}
/* The one category that is about the book rather than the recording, so it is the one
   worth finding on a page of forty. */
.shelf .tag-book { color: #8a4b12; background: #fdf3e6; border-color: #e8cda6; }
.shelf .spot {
  order: 1;
  flex-basis: 100%;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin: 2px 0 0;
}
.shelf .reply {
  order: 2;
  flex-basis: 100%;
  background: #f1f7f3;
  border-left: 3px solid #1c6b3a;
  border-radius: 3px;
  padding: 8px 11px;
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--ink);
}
.shelf .note-edit select {
  flex-basis: 100%;
  font: 15px/1.4 Arial, Helvetica, sans-serif;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.shelf .keep-open {
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  background: transparent;
  border: 1px solid #1c6b3a;
  border-radius: 4px;
  color: #1c6b3a;
  padding: 8px 11px;
  cursor: pointer;
}
.shelf .keep-open:hover { background: #f1f7f3; }
.shelf li.done .tag { opacity: 0.65; }
.shelf li.done .said { color: #4a5568; }

/* Picked up where they left off. */
.resumed {
  background: #fdf8e6;
  border: 1px solid var(--gold-soft);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--ink);
}
.resumed a { margin-left: 10px; }

/* This sheet is one they marked. */
.pdf-toolbar .marked {
  font-weight: 700;
  color: #8a6d1a;
  background: var(--gold-soft);
  border-radius: 3px;
  padding: 3px 9px;
  font-size: 13px;
}