/* B323 · the field note player, as a product, and the docked player that follows the page.
   CultureAI blue is the one accent (Monica's notes keep their violet through --px-acc); Rubik throughout; status is a word. */

/* ---------- inline ---------- */
.px-art .prose .px-lis.px-lis323,
.px-lis.px-lis323{display:block;box-sizing:border-box;margin:0 0 44px;padding:20px 22px 18px;background:var(--px-card);border:1px solid var(--px-line);border-radius:22px;
  box-shadow:0 1px 2px #0a16330a,0 10px 30px -18px #0a163333;font-family:var(--px-sans);color:var(--px-ink);grid-template-columns:none}
.px-lis323 *{box-sizing:border-box}
.px-lis323 .px-lis-top{display:flex;align-items:center;gap:18px;min-width:0}
.px-art .prose .px-lis323 img.px-lis-art,.px-lis323 .px-lis-art{flex:none;width:112px;height:112px;margin:0;border-radius:14px;object-fit:cover;display:block;
  box-shadow:0 0 0 1px #0a163314,0 8px 20px -12px #0a163366;background:var(--px-paper2)}
.px-lis323 .px-lis-meta{flex:auto;min-width:0}
.px-lis323 .px-lis-k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font:500 13px/1.3 var(--px-sans);color:var(--px-acc-ink,var(--px-blue-ink))}
.px-lis323 .px-lis-show{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-lis323 .px-lis-min{flex:none;font:400 13px/1.3 var(--px-sans);color:var(--px-mute);font-variant-numeric:tabular-nums}
.px-lis323 .px-lis-t{margin:4px 0 0;font:600 21px/1.22 var(--px-sans);letter-spacing:-.012em;color:var(--px-ink);text-wrap:balance}
.px-lis323 .px-lis-by{margin:3px 0 0;font:400 14px/1.35 var(--px-sans);color:var(--px-char)}
.px-lis323 .px-lis-st{margin:8px 0 0;font:500 13px/1.3 var(--px-sans);color:var(--px-mute);min-height:1.3em}
.px-lis323.is-playing .px-lis-st{color:var(--px-acc-ink,var(--px-blue-ink))}

/* the scrubber: a 6px track that grows on hover, ticks where each paragraph starts */
.px-lis323 .px-lis-bar{position:relative;height:28px;margin:18px 0 0}
.px-lis323 .px-lis-seek{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:28px;margin:0;padding:0;background:none;cursor:pointer;--fill:0%;touch-action:pan-y}
.px-lis323 .px-lis-seek::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--px-acc,var(--px-blue)) 0 var(--fill),var(--px-paper2) var(--fill) 100%);box-shadow:inset 0 0 0 1px #0a163310}
.px-lis323 .px-lis-seek::-moz-range-track{height:6px;border-radius:999px;background:var(--px-paper2)}
.px-lis323 .px-lis-seek::-moz-range-progress{height:6px;border-radius:999px;background:var(--px-acc,var(--px-blue))}
.px-lis323 .px-lis-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border:0;border-radius:999px;background:#fff;
  box-shadow:0 0 0 1px #0a163324,0 2px 6px #0a163340;transition:transform .15s}
.px-lis323 .px-lis-seek::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #0a163324,0 2px 6px #0a163340}
.px-lis323 .px-lis-seek:hover::-webkit-slider-thumb,.px-lis323 .px-lis-seek:active::-webkit-slider-thumb{transform:scale(1.12)}
.px-lis323 .px-lis-seek:focus{outline:none}
.px-lis323 .px-lis-seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--px-acc,var(--px-blue))}
.px-lis323 .px-lis-seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--px-acc,var(--px-blue))}
.px-lis323 .px-lis-ticks{position:absolute;left:0;right:0;top:50%;height:0;pointer-events:none}
.px-lis323 .px-lis-ticks b{position:absolute;top:-5px;width:2px;height:10px;border-radius:1px;background:var(--px-ink);opacity:.14;transform:translateX(-1px)}
.px-lis323 .px-lis-row{display:flex;justify-content:space-between;margin:2px 0 0;font:500 12px/1 var(--px-sans);color:var(--px-mute);font-variant-numeric:tabular-nums}
.px-lis323 .px-lis-time[hidden]{display:none}

/* the controls: speed, back 15, play, forward 30, with play at the centre */
.px-lis323 .px-lis-ctl{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:14px;margin:12px 0 0}
.px-lis323 .px-lis-b{position:relative;display:inline-grid;place-items:center;min-width:48px;height:48px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:var(--px-ink);
  font:500 14px/1 var(--px-sans);cursor:pointer;transition:background .15s}
.px-lis323 .px-lis-b:hover{background:var(--px-paper2);border:0}
.px-lis323 .px-lis-b svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}
.px-lis323 .px-lis-skip span{position:absolute;left:50%;top:50%;transform:translate(-50%,-42%);font:600 8.5px/1 var(--px-sans)}
.px-lis323 .px-lis-rate{justify-self:start;min-width:56px;height:36px;padding:0 12px;border:1px solid var(--px-line2);background:var(--px-card);font-variant-numeric:tabular-nums}
.px-lis323 .px-lis-rate:hover{border-color:var(--px-ink);background:var(--px-card)}
.px-lis323 .px-lis-pp{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:0;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--px-acc,var(--px-blue));color:#fff;box-shadow:0 8px 18px -8px var(--px-acc,var(--px-blue));transition:transform .15s,background .15s}
.px-lis323 .px-lis-pp:hover{background:var(--px-acc-ink,var(--px-blue-ink))}
.px-lis323 .px-lis-pp:active{transform:scale(.96)}
.px-lis323 .px-lis-pp svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.px-lis323.is-playing .px-lis-pp svg{margin-left:0}
.px-lis323 .px-lis-pp[aria-disabled="true"]{background:var(--px-mute);box-shadow:none;cursor:progress}
.px-lis323 :focus-visible{outline:2px solid var(--px-acc,var(--px-blue));outline-offset:3px}
.px-lis323 .px-lis-seek:focus-visible{outline:none}

/* waiting for sound: a ring turns around the play button, in the same spot (the status line says Loading) */
.px-lis323 .px-lis-pp::after,.px-dock .px-dk-pp::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2.5px solid transparent;pointer-events:none;opacity:0;transition:opacity .2s}
.px-lis323[data-buf] .px-lis-pp::after,.px-lis323.px-lis-making .px-lis-pp::after{opacity:1;border-top-color:var(--px-acc,var(--px-blue));border-right-color:var(--px-acc,var(--px-blue));animation:px-ring323 .8s linear infinite}
.px-dock[data-buf] .px-dk-pp::after{opacity:1;border-top-color:var(--px-sky);border-right-color:var(--px-sky);animation:px-ring323 .8s linear infinite}
@keyframes px-ring323{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .px-lis323[data-buf] .px-lis-pp::after,.px-lis323.px-lis-making .px-lis-pp::after,.px-dock[data-buf] .px-dk-pp::after{animation:none;border-color:var(--px-acc,var(--px-blue));border-left-color:transparent}
}

@media (max-width:600px){
  .px-art .prose .px-lis.px-lis323,.px-lis.px-lis323{padding:16px 16px 12px;border-radius:20px;margin-bottom:36px}
  .px-lis323 .px-lis-top{gap:14px;align-items:flex-start}
  .px-art .prose .px-lis323 img.px-lis-art,.px-lis323 .px-lis-art{width:76px;height:76px;border-radius:12px}
  .px-lis323 .px-lis-show{white-space:normal}
  .px-lis323 .px-lis-t{font-size:18px}
  .px-lis323 .px-lis-by{font-size:13px}
  .px-lis323 .px-lis-st{margin-top:6px}
  .px-lis323 .px-lis-ctl{gap:6px}
  .px-lis323 .px-lis-pp{width:60px;height:60px}
}
@media (max-width:360px){.px-lis323 .px-lis-k .px-lis-min{display:none}}
@media print{.px-lis323{display:none!important}}

/* ---------- docked: follows the page once the player scrolls away ---------- */
.px-dock .px-dk-in{gap:12px;padding:10px 12px 12px 12px}
.px-dock .px-dk-art{width:48px;height:48px;border-radius:10px;background:var(--px-paper);overflow:hidden;display:block}
.px-dock .px-dk-art img{width:48px;height:48px;object-fit:cover;display:block}
.px-dock .px-dk-k{font:500 12px/1.35 var(--px-sans);color:var(--px-sky)}
.px-dock .px-dk-t{font:600 15px/1.3 var(--px-sans)!important;letter-spacing:-.005em}
.px-dock .px-dk-time{font:500 12px/1 var(--px-sans);font-variant-numeric:tabular-nums;color:#ffffffc4}
.px-dock .px-dk-ctl{display:flex;align-items:center;gap:2px;flex:none}
.px-dock .px-dk-pp{width:48px;height:48px}
.px-dock .px-dk-pp svg{width:17px;height:17px}
.px-dock .px-dk-b span{font:600 8px/1 var(--px-sans)}
.px-dock.scr .px-dk-k{color:#c4b5fd}
@media (max-width:600px){
  .px-dock .px-dk-in{gap:10px;padding:8px 8px 10px 10px}
  .px-dock .px-dk-art,.px-dock .px-dk-art img{width:44px;height:44px}
  .px-dock .px-dk-b{display:none}
  .px-dock .px-dk-b.px-dk-f{display:grid}
  .px-dock .px-dk-t{font-size:15px!important}
}