/* Voxread book player + description (vr1). Theme-level; audio_player module untouched. */
.vxp,.vxp-sheet,.vxp-backdrop,.vx-desc{--vxp-accent:var(--vx-accent,#e65100);--vxp-time:var(--muted-foreground);--vxp-ease:cubic-bezier(.23,1,.32,1);--vxp-ease-drawer:cubic-bezier(.32,.72,0,1)}
.vxp button,.vxp-sheet button,.vx-desc button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

.vxp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.vxp-lock,html.vxp-lock body{overflow:hidden}

/* Description */
.vx-desc{max-width:42rem}
.vx-desc-body{position:relative;color:var(--muted-foreground);line-height:1.65!important;font-size:1rem}
.vx-desc-body p{margin:0 0 .75em;line-height:1.65}
.vx-desc-body p:first-child{margin-top:0}
.vx-desc-body.is-clamped{max-height:4.95em;overflow:hidden}
.vx-desc-body.is-clamped::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.65em;background:linear-gradient(to bottom,transparent,var(--background));pointer-events:none}
.vx-desc-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:4px!important;padding:4px 0!important;color:var(--muted-foreground)!important;font-size:13px!important;font-weight:400!important}
@media (hover:hover) and (pointer:fine){.vx-desc-toggle:hover{color:var(--foreground)!important}}
.vx-desc-toggle[hidden]{display:none}
.vx-desc-toggle svg{width:13px;height:13px;transition:transform .24s ease-out}
.vx-desc-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Player (flows on the page, no card) */
.vxp{max-width:640px;color:var(--foreground)}
.vxp-np{display:flex;align-items:center;gap:12px}
.vxp-chbtn{display:flex;align-items:center;gap:8px;min-width:0;flex:1;text-align:left;padding:6px 8px!important;margin:-6px -8px!important;border-radius:var(--vx-r-md);transition:background-color .15s var(--vxp-ease)}
@media (hover:hover) and (pointer:fine){.vxp-chbtn:hover{background:var(--muted)}}
.vxp-chbtn:active{transform:scale(.98)}
.vxp-chbtn .vxp-ico{flex:none;width:20px;height:20px;color:var(--muted-foreground);opacity:.75}
@media (hover:hover) and (pointer:fine){.vxp-chbtn:hover .vxp-ico{opacity:1}}
.vxp-t{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.vxp-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--vx-r-pill);color:var(--foreground);transition:transform .16s var(--vxp-ease),background-color .16s var(--vxp-ease)}
@media (hover:hover) and (pointer:fine){.vxp-btn:hover{background:var(--muted)}}
.vxp-btn:active{transform:scale(.92)}
.vxp-btn svg{width:24px;height:24px}
.vxp-more{flex:none;width:36px;height:36px;color:var(--muted-foreground);opacity:.75}
@media (hover:hover) and (pointer:fine){.vxp-more:hover{opacity:1}}
.vxp-more svg{width:18px;height:18px}
.vxp-progress{margin:14px 0 2px}
.vxp-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:20px;background:transparent;margin:0;padding:0;border:0;cursor:pointer;--p:0%}
.vxp-range::-webkit-slider-runnable-track{height:4px;border-radius:var(--vx-r-xs);background:linear-gradient(to right,var(--vxp-accent) var(--p),color-mix(in oklab,var(--foreground) 18%,transparent) var(--p))}
.vxp-range::-moz-range-track{height:4px;border-radius:var(--vx-r-xs);background:color-mix(in oklab,var(--foreground) 18%,transparent)}
.vxp-range::-moz-range-progress{height:4px;border-radius:var(--vx-r-xs);background:var(--vxp-accent)}
.vxp-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:var(--vx-r-pill);background:var(--foreground);margin-top:-5px;box-shadow:0 1px 4px rgb(0 0 0/.3);transition:transform .15s var(--vxp-ease)}
.vxp-range:active::-webkit-slider-thumb{transform:scale(1.25)}
.vxp-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:var(--vx-r-pill);background:var(--foreground)}
.vxp-times{display:flex;justify-content:space-between;font-size:12px;color:var(--vxp-time);font-variant-numeric:tabular-nums}
.vxp-controls{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:8px 0 4px}
.vxp-skip{position:relative}
.vxp-skip span{position:absolute;font-size:9px;font-weight:700;top:16px;left:0;right:0;text-align:center;pointer-events:none}
.vxp-play{width:60px;height:60px;background:var(--vxp-accent)!important;color:#fff}
@media (hover:hover) and (pointer:fine){.vxp-play:hover{background:var(--vx-accent-hover)!important}}
.vxp-play svg{width:28px;height:28px}
.vxp-sub{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:6px;padding-top:4px}
.vxp-sub button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:40px;padding:8px 12px!important;border-radius:var(--vx-r-md);font-size:13px;color:var(--muted-foreground);transition:background-color .15s var(--vxp-ease),color .15s}
@media (hover:hover) and (pointer:fine){.vxp-sub button:hover{background:var(--muted);color:var(--foreground)}}
.vxp-sub svg{width:19px;height:19px}
.vxp-sub b{font-weight:600;font-variant-numeric:tabular-nums}
.vxp-sub b:empty{display:none}
@media (hover:hover) and (pointer:fine){.vxp-sub .is-on,.vxp-sub .is-on:hover{color:var(--vxp-accent)}}

/* Overlay + sheets: bottom drawer on mobile, dialog / dropdown on desktop */
.vxp-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s var(--vxp-ease);z-index:1000}
.vxp-backdrop.is-open{opacity:1}
.vxp-backdrop[hidden],.vxp-sheet[hidden]{display:none}
.vxp-sheet{position:fixed;z-index:1001;background:var(--popover);color:var(--popover-foreground,var(--foreground));border:1px solid var(--border);box-shadow:0 20px 50px rgb(0 0 0/.25);outline:none;left:0;right:0;bottom:0;border-radius:var(--vx-r-lg) var(--vx-r-lg) 0 0;max-height:85vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s var(--vxp-ease-drawer);padding-bottom:env(safe-area-inset-bottom);font-family:inherit}
.vxp-sheet.is-open{transform:translateY(0)}
.vxp-sheet.is-dragging{transition:none}
.vxp-handle{width:40px;height:5px;border-radius:var(--vx-r-pill);background:color-mix(in oklab,var(--foreground) 25%,transparent);margin:10px auto 4px;flex:none;touch-action:none}
.vxp-head{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 12px;border-bottom:1px solid var(--border);touch-action:none;cursor:grab}
.vxp-head h2{font-size:17px!important;font-weight:600;margin:0!important;line-height:1.3}
.vxp-total{font-size:13px;color:var(--vxp-time);font-variant-numeric:tabular-nums}
.vxp-body{overflow:auto;overscroll-behavior:contain;padding:6px 8px 12px}
.vxp-x{display:none}
.vxp-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px!important;border-radius:var(--vx-r-md);font-size:15px;color:inherit!important;text-decoration:none!important;transition:background-color .12s var(--vxp-ease);line-height:1.35}
@media (hover:hover) and (pointer:fine){.vxp-item:hover,.vxp-item:focus-visible{background:var(--muted)}}
.vxp-item[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.vxp-item .vxp-name{flex:1;min-width:0}
.vxp-item .vxp-dur{color:var(--vxp-time);font-size:13px;font-variant-numeric:tabular-nums;flex:none}
/* one selected-row pattern for chapters, speed and timer */
.vxp-item[aria-current="true"],.vxp-item[aria-checked="true"]{background:color-mix(in oklab,var(--vxp-accent) 18%,transparent)}
.vxp-eq{display:none;width:16px;height:14px;gap:2px;align-items:flex-end;flex:none}
.vxp-item[aria-current="true"] .vxp-eq{display:flex}
.vxp-eq i{display:block;width:3px;background:var(--vxp-accent);height:40%;border-radius:1px;transform-origin:bottom}
.vxp-playing .vxp-eq i{animation:vxp-eq 1s var(--vxp-ease) infinite alternate}
.vxp-eq i:nth-child(2){animation-delay:.2s}.vxp-eq i:nth-child(3){animation-delay:.4s}
@keyframes vxp-eq{from{transform:scaleY(.4)}to{transform:scaleY(1.6)}}
.vxp-item svg{width:20px;height:20px;flex:none;color:var(--muted-foreground)}
.vxp-badge{font-size:11px;padding:2px 7px;border-radius:var(--vx-r-pill);background:color-mix(in oklab,var(--vxp-accent) 25%,transparent);color:var(--vxp-accent);margin-left:6px}
.vxp-item .vxp-check{margin-left:auto;color:var(--vxp-accent);opacity:0}
.vxp-item[aria-checked="true"] .vxp-check{opacity:1}
.vxp-meta{color:var(--muted-foreground);font-size:12px;margin-left:auto}
.vxp-msep{height:1px;background:var(--border);margin:6px 8px}
@media (min-width:768px){
  .vxp-sheet{bottom:auto;left:50%;top:50%;right:auto;width:min(480px,92vw);max-height:min(640px,80vh);border-radius:var(--vx-r-lg);transform:translate(-50%,-48%) scale(.96);opacity:0;transition:transform .22s var(--vxp-ease),opacity .22s var(--vxp-ease)}
  .vxp-sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .vxp-sheet .vxp-handle{display:none}
  .vxp-head{cursor:default;padding-top:16px}
  .vxp-x{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--vx-r-sm);color:var(--muted-foreground)}
  .vxp-x:hover{background:var(--muted)}
  .vxp-sheet.vxp-pop{width:300px;max-height:none;transform:scale(.96);transform-origin:var(--origin,top right);top:var(--top);left:var(--left);border-radius:var(--vx-r-md)}
  .vxp-sheet.vxp-pop.is-open{transform:scale(1)}
  .vxp-sheet.vxp-pop .vxp-head{display:none}
  .vxp-sheet.vxp-pop .vxp-body{padding:6px}
  .vxp-sheet.vxp-pop .vxp-item{padding:9px 10px!important;font-size:14px}
  .vxp-backdrop.is-light{background:transparent}
}
@media (prefers-reduced-motion:reduce){
  .vxp *,.vxp-sheet,.vxp-sheet *,.vxp-backdrop,.vx-desc *{transition-duration:.01ms!important;animation:none!important}
  .vxp-sheet{transform:none!important}
  .vxp-sheet:not(.is-open){opacity:0}
  @media (min-width:768px){.vxp-sheet{transform:translate(-50%,-50%)!important}.vxp-sheet.vxp-pop{transform:none!important}}
}

/* Voxread 2026-10-20 (ios): muted hint in the menu's BookPlayer section. */
.vxp-hint{margin:-2px 12px 4px 48px;color:var(--muted-foreground);font-size:12px;line-height:1.4}
.vxp-sheet.vxp-pop .vxp-hint{margin-left:44px}

/* Voxread 2026-10-20 (copybp): toast for 'Copy link for BookPlayer'. */
.vxp-toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:10050;transform:translate(-50%,8px);opacity:0;width:max-content;max-width:min(92vw,420px);padding:12px 14px;border-radius:var(--vx-r-md);background:var(--popover);color:var(--popover-foreground,var(--foreground));border:1px solid var(--border);box-shadow:0 8px 30px rgb(0 0 0/.25);font-size:14px;line-height:1.4;transition:opacity .2s,transform .2s}
.vxp-toast.is-on{opacity:1;transform:translate(-50%,0)}
.vxp-toast-url{display:block;width:100%;margin-top:8px;padding:8px;border-radius:var(--vx-r-sm);border:1px solid var(--input,var(--border));background:var(--background);color:var(--foreground);font-size:16px}
@media (prefers-reduced-motion: reduce){.vxp-toast{transition:none}}

/* Voxread 2026-10-21 (size): Audible-style sizing and spacing; orange play; book "Xm left" in the time row. */
.vxp{max-width:560px}
.vxp-np{gap:12px;min-height:48px}
.vxp-chbtn{gap:14px}
.vxp-chbtn .vxp-ico{width:26px;height:26px;opacity:.9;color:var(--foreground)}
.vxp-t{font-size:20px;font-weight:700;letter-spacing:-.01em}
.vxp-more{width:44px;height:44px}
.vxp-more svg{width:22px;height:22px}
.vxp-progress{margin:28px 0 4px}
.vxp-range{height:28px}
.vxp-range::-webkit-slider-runnable-track{height:5px}
.vxp-range::-moz-range-track,.vxp-range::-moz-range-progress{height:5px}
.vxp-range::-webkit-slider-thumb{width:16px;height:16px;margin-top:-5.5px}
.vxp-times{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;font-size:14px;margin-top:2px}
.vxp-times .vxp-left{text-align:right}
.vxp-mid{text-align:center;color:var(--foreground);opacity:.85;white-space:nowrap}
.vxp-controls{justify-content:space-between;gap:0;margin:22px -6px 8px}
.vxp-btn{width:56px;height:56px}
.vxp-btn svg{width:34px;height:34px}
.vxp-skip svg{width:44px;height:44px}
.vxp-skip span{font-size:14px;top:50%;transform:translateY(-38%);letter-spacing:-.02em}
.vxp .vxp-play{width:96px;height:96px;background:var(--vxp-accent)!important;color:#fff;box-shadow:0 8px 24px color-mix(in oklab,var(--vx-accent) 25%,transparent)}
@media (hover:hover) and (pointer:fine){.vxp .vxp-play:hover{background:var(--vx-accent-hover)!important}}
.vxp .vxp-play svg{width:42px;height:42px}
.vxp-sub{justify-content:space-around;gap:0;margin-top:22px;padding-top:0}
.vxp-sub button{flex-direction:column;gap:6px;min-width:88px;min-height:64px;padding:8px 12px!important;border-radius:var(--vx-r-md);font-size:13px;color:var(--foreground)}
.vxp-sub svg{width:28px;height:28px}
.vxp-sub b{font-size:13px;font-weight:600;line-height:1}
/* Icon + small label until a value is set; then the value replaces the label (accent). */
.vxp-sub button:has(b:empty)::after{font-size:13px;line-height:1;color:var(--muted-foreground)}
.vxp-sub button[data-open="speed"]:has(b:empty)::after{content:"Speed"}
.vxp-sub button[data-open="timer"]:has(b:empty)::after{content:"Timer"}
@media (max-width:380px){.vxp-btn{width:48px;height:48px}.vxp-skip svg{width:40px;height:40px}.vxp .vxp-play{width:84px;height:84px}}
/* Voxread 2026-10-22 (basecoat): buttons now carry Basecoat classes (btn-icon-ghost, btn-icon-primary, btn-ghost).
 * vx classes keep only size and layout: 96px play, 44px+ touch targets, column layout for speed/timer. */
.vxp .vxp-btn,.vxp-sheet .vxp-x{padding:0;border-radius:var(--vx-r-pill)}
.vxp-sheet .vxp-x{border-radius:var(--vx-r-sm)}
.vxp .vxp-sub button{height:auto;box-shadow:none}
.vxp .vxp-btn svg{width:34px;height:34px}.vxp .vxp-skip svg{width:44px;height:44px}.vxp .vxp-play svg{width:42px;height:42px}
.vxp .vxp-more svg{width:34px;height:34px}.vxp .vxp-sub svg{width:28px;height:28px}.vxp-sheet .vxp-x svg{width:18px;height:18px}
@media (max-width:380px){.vxp .vxp-skip svg{width:40px;height:40px}}

/* 2026-10-22 width: 30 now drawn inside the SVG arc. */
.vxp-skip span{display:none}
.vxp .vxp-skip text{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* 2026-10-22 width: shared 640px content column (matches .vx-bh). */
html body .vx-desc,html body .vxp{max-width:640px;box-sizing:border-box}
@media (max-width:640px){html body .vx-desc,html body .vxp{max-width:none}}

/* 2026-10-22 space: secondary controls toned down (muted-foreground); hover/active brighten. Orange play unchanged. */
html body .vxp .vxp-btn:not(.vxp-play),html body .vxp .vxp-sub button,html body .vxp .vxp-more,html body .vxp .vxp-chbtn .vxp-ico{color:var(--muted-foreground);opacity:1}
@media (hover:hover) and (pointer:fine){html body .vxp .vxp-btn:not(.vxp-play):hover,html body .vxp .vxp-sub button:hover,html body .vxp .vxp-more:hover,html body .vxp .vxp-chbtn:hover .vxp-ico{color:var(--foreground)}}
html body .vxp .vxp-btn:not(.vxp-play):active,html body .vxp .vxp-sub button:active{color:var(--foreground)}
html body .vxp .vxp-sub .is-on{color:var(--vxp-accent)}
html body .vxp .vxp-controls{margin:16px -6px 8px}
html body .vxp .vxp-sub{margin-top:16px}
html body .vxp .vxp-progress{margin:24px 0 4px}