/* Dynasty Library — Lane Curriculum Car reading room.
   Loads after library.css and publications.css and only adds the act
   typography a Car needs: the Meridian beats, the act rail, and the sources
   block. Every colour comes from the Library tokens in library.css. */

/* CAR HEAD */
.car-head{padding:26px 0 6px;border-bottom:1px solid var(--edge)}
.car-head h1{
  font-family:'ArchivoBlack';
  font-size:clamp(34px,6vw,58px);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--off);
  margin:6px 0 14px;
}
.car-lede{
  font-family:'Spectral';font-size:19.5px;line-height:1.55;
  color:var(--bone);max-width:44em;margin-bottom:16px;
}
.car-note{
  font-family:'BarlowCondensed';font-size:15px;letter-spacing:.01em;
  color:var(--mute);max-width:44em;margin:12px 0 24px;
}

/* ACT RAIL — four acts, always four, in order. */
.car-nav{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:26px 0 8px;
}
.car-nav a{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 14px;border:1px solid var(--edge);border-radius:3px;
  background:var(--near);color:var(--bone);
}
.car-nav a:hover{border-color:var(--amber);background:var(--slate);color:var(--off)}
.car-nav .cn-no{
  font-family:'BarlowCondensed';font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
}
.car-nav .cn-title{font-family:'Spectral';font-size:16px;line-height:1.28}
.car-nav .cn-run{
  font-family:'BarlowCondensed';font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);
}

/* ACTS */
.act{padding:40px 0 8px;border-top:1px solid var(--edge)}
.act:first-of-type{border-top:0}
.act-no{
  font-family:'BarlowCondensed';font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
}
.act-no .act-run{color:var(--mute);letter-spacing:.1em}
.act h2{
  font-family:'ArchivoBlack';
  font-size:clamp(26px,3.6vw,38px);line-height:1.1;
  color:var(--off);margin:8px 0 22px;
}
.act p{
  font-family:'Spectral';font-size:18.5px;line-height:1.68;
  color:var(--bone);margin-bottom:19px;max-width:42em;
}
.act p strong{color:var(--off);font-weight:600}
.act p em{font-style:italic}

/* THE MERIDIAN BEATS */
.act-premise{
  border-left:3px solid var(--amber);
  padding:14px 0 14px 18px;
  background:linear-gradient(90deg,rgba(245,158,11,.06),transparent 70%);
}
.act-question{
  font-style:italic;color:var(--off) !important;
  font-size:20px !important;line-height:1.5 !important;
  padding:20px 0 4px;border-top:1px solid var(--edge);
  margin-top:28px !important;
}
.act-move{
  border:1px solid var(--amber-soft);border-left-width:3px;border-radius:3px;
  background:rgba(245,158,11,.05);
  padding:18px 20px;margin-top:6px;
}
.act-founder{
  border-left:3px solid var(--slate);
  padding:4px 0 4px 18px;
  color:var(--mute) !important;
  font-size:17.5px !important;
}
.act-founder strong{color:var(--bone) !important}

/* SOURCES — every 2026 figure is checkable from the page it is stated on. */
.act-sources{
  margin:26px 0 8px;padding:16px 18px;
  border:1px solid var(--edge);border-radius:3px;background:var(--near);
}
.act-sources-head{
  font-family:'BarlowCondensed' !important;font-weight:700;
  font-size:11.5px !important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:10px !important;
}
.act-sources ul{list-style:none;display:grid;gap:9px}
.act-sources li{
  font-family:'BarlowCondensed';font-size:14.5px;line-height:1.45;
  color:var(--mute);word-break:break-word;
}
.act-sources a{color:var(--amber-soft)}
.act-sources a:hover{color:var(--amber)}

/* TAIL */
.car-tail{margin-top:14px}
.car-tail h2{font-size:clamp(22px,3vw,30px)}

@media (max-width:780px){
  .car-nav{grid-template-columns:repeat(2,1fr)}
  .act p{font-size:17.5px}
}
@media (max-width:460px){
  .car-nav{grid-template-columns:1fr}
}

/* TRAIN LEDGER — the current Car marks itself instead of linking to itself. */
.issue-ledger .lstate.here{color:var(--off)}
.car-tail .parea-back{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.car-tail .parea-back .back-note{flex-basis:100%}
.back-btn.ghost{border-color:var(--edge);color:var(--mute)}
.back-btn.ghost:hover{background:transparent;border-color:var(--bone);color:var(--off)}

/* ================================================================
   LISTENING LAYER — read-along for a Car.
   A Car is four acts, so it is four tracks. The transport sits inside
   the act it plays, never as a floating bar, so the rider always knows
   which eleven minutes they are starting.
   ================================================================ */

.car-listen{
  margin:22px 0 4px;padding:18px 20px;
  border:1px solid var(--edge);border-left:3px solid var(--amber);
  border-radius:3px;background:var(--near);
}
.cl-head{
  font-family:'BarlowCondensed';font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;
}
.cl-body{
  font-family:'Spectral';font-size:17px;line-height:1.55;
  color:var(--bone);max-width:52em;
}
.cl-keys{
  font-family:'BarlowCondensed';font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute);margin-top:10px;
}

/* TRANSPORT */
.act-player{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:14px 0 22px;padding:12px 14px;
  border:1px solid var(--edge);border-radius:3px;background:var(--near);
}
.act-player.is-ready{border-color:#3a3a3a}
.ap-play{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--amber);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ap-play:hover{background:var(--slate)}
.ap-icon{
  width:0;height:0;margin-left:3px;
  border-left:13px solid var(--amber);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}
/* The dock reuses the act player's icon, so it has to answer to the same
   playing state — a button that says "Pause narration" must not draw a
   triangle. */
.ap-play.is-playing .ap-icon,
.ld-play.is-playing .ap-icon{
  width:12px;height:14px;margin-left:0;border:0;
  border-left:4px solid var(--amber);border-right:4px solid var(--amber);
  background:transparent;
}
.ap-body{flex:1 1 220px;min-width:180px}
.ap-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.ap-status,.ap-time{
  font-family:'BarlowCondensed';font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);
}
.ap-status{color:var(--bone)}
.ap-scrub{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:var(--slate);border-radius:2px;cursor:pointer;
}
.ap-scrub::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--amber);border:0;cursor:pointer;
}
.ap-scrub::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:var(--amber);border:0;cursor:pointer;
}
.ap-speed,.ap-follow{
  font-family:'BarlowCondensed';font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:8px 11px;border:1px solid var(--edge);border-radius:3px;
  background:transparent;color:var(--mute);cursor:pointer;
}
.ap-speed:hover,.ap-follow:hover{border-color:var(--bone);color:var(--off)}
.ap-follow.is-on{border-color:var(--amber-soft);color:var(--amber)}

/* THE WORDS, WHILE THEY ARE BEING READ.
   Colour alone would fail a rider who cannot see it, so the active
   paragraph also carries a left marker. */
.act .segment{padding:3px 6px;margin:0 -6px;border-radius:2px;transition:color .18s ease,background .18s ease}
.act .segment.is-seekable{cursor:pointer}
.act .segment.is-read{color:var(--mute)}
.act:not(.is-live) .segment.is-active{background:transparent;box-shadow:none;color:inherit}
.act .segment.is-active{
  background:rgba(245,158,11,.09);
  box-shadow:inset 3px 0 0 var(--amber);
  color:var(--off);
}
.act h2.segment.is-active{background:rgba(245,158,11,.13)}
.act .segment.is-seekable:hover:not(.is-active){background:var(--slate)}
.act .segment.act-founder.is-active{box-shadow:inset 3px 0 0 var(--bone)}

@media (prefers-reduced-motion:reduce){
  .act .segment{transition:none}
}
@media (max-width:560px){
  .act-player{gap:9px;padding:11px}
  .ap-follow{order:5}
}

/* ─────────────────────────────────────────────────────────────────────────
   THE DOCK — pause is never more than a thumb away.

   The inline act player is the right place to START an act, and the wrong
   place to stop one: four paragraphs into Act II it has scrolled a screen and
   a half above the rider, and there is no way to pause without hunting for it.
   So once an act is under way the transport also rides at the bottom edge —
   but only while the act's own player is off screen, so the two controls are
   never both on the page arguing with each other.
   ───────────────────────────────────────────────────────────────────────── */
.lane-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(10,10,10,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--edge);
  transform:translateY(105%);
  transition:transform .22s ease;
  visibility:hidden;
}
.lane-dock.is-up{transform:translateY(0);visibility:visible}
body.has-lane-dock{padding-bottom:82px}

.ld-progress{height:2px;background:var(--slate)}
.ld-fill{display:block;height:100%;width:0;background:var(--amber);transition:width .2s linear}

.ld-inner{display:flex;align-items:center;gap:14px;padding:13px 0}
.ld-play{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--amber);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ld-play:hover{background:var(--slate)}
.ld-skip{
  flex:0 0 auto;display:flex;align-items:center;gap:3px;
  border:1px solid var(--edge);border-radius:3px;background:transparent;
  padding:8px 9px;cursor:pointer;color:var(--mute);
  font-family:'BarlowCondensed';font-weight:700;font-size:11.5px;letter-spacing:.06em;
}
.ld-skip:hover{border-color:var(--bone);color:var(--off)}
.ld-skip .ld-arrow{font-size:13px;line-height:1}

.ld-meta{flex:1 1 auto;min-width:0}
.ld-title{
  font-family:'BarlowCondensed';font-weight:700;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--off);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ld-act{
  font-family:'BarlowCondensed';font-weight:600;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ld-time{
  flex:0 0 auto;
  font-family:'BarlowCondensed';font-weight:600;
  font-size:13px;letter-spacing:.06em;color:var(--bone);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ld-jump,.ld-speed{
  flex:0 0 auto;
  font-family:'BarlowCondensed';font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:9px 12px;border:1px solid var(--edge);border-radius:3px;
  background:transparent;color:var(--mute);cursor:pointer;white-space:nowrap;
}
.ld-jump:hover,.ld-speed:hover{border-color:var(--bone);color:var(--off)}

/* Phone: the three things a rider actually reaches for are pause, where they
   are, and getting back to the line. The rest steps aside rather than wrap. */
@media (max-width:760px){
  body.has-lane-dock{padding-bottom:76px}
  .ld-inner{gap:10px;padding:11px 0}
  .ld-skip{display:none}
  .ld-speed{display:none}
  .ld-act{display:none}
  .ld-jump{padding:9px 10px}
}
@media (max-width:420px){
  .ld-jump .ld-jump-word{display:none}
}

@media (prefers-reduced-motion:reduce){
  .lane-dock{transition:none}
  .ld-fill{transition:none}
}