/* Compact Album Browser. All rules are scoped to this widget. */
.jrpps-browser {
  --jrpps-browser-height: 50vh;
  --jrpps-row-height: 26px;
  --jrpps-play-size: 22px;
  --jrpps-icon-size: 12px;
  --jrpps-fade-height: 40px;
  height: var(--jrpps-browser-height);
  max-height: 50vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(8px,1.2vw,20px);
}
.jrpps-browser-heading { flex:0 1 auto; min-height:0; max-height:25%; overflow:auto; padding-bottom:8px; margin-bottom:10px; gap:12px; }
.jrpps-browser-heading h2 { font-size:clamp(18px,min(2.4cqi,3vh),34px); }
.jrpps-browser-heading p { margin-bottom:4px; }
.jrpps-album-rail { flex:0 1 auto; min-height:0; max-height:25%; overflow:auto; padding:0 0 8px; }
.jrpps-album-button { padding:4px; grid-template-columns:36px minmax(0,1fr); }
.jrpps-album-button img { width:36px; height:36px; }
.jrpps-selected-album {
  flex:1 1 0%; min-height:0; max-height:100%; overflow:hidden;
  grid-template-columns:minmax(0,11fr) minmax(0,9fr);
  grid-template-rows:minmax(0,1fr); align-items:stretch;
  gap:clamp(14px,2cqi,32px); padding:clamp(8px,min(2cqi,2vh),24px); box-shadow:none;
}
.jrpps-album-overview { min-height:0; grid-template-rows:minmax(0,1fr); gap:clamp(10px,1.5cqi,24px); overflow:hidden; }
.jrpps-album-overview:has(.jrpps-description) { grid-template-rows:minmax(0,1fr) minmax(0,.5fr); }
.jrpps-cover { min-height:0; align-self:stretch; display:flex; align-items:flex-start; justify-content:flex-start; }
.jrpps-cover img { height:auto; max-height:100%; width:100%; object-fit:contain; object-position:top left; box-shadow:none; }
.jrpps-story { min-height:0; overflow:visible; }
.jrpps-story>p { flex:none; font-size:clamp(8px,.8cqi,11px); line-height:1.25; margin-bottom:clamp(4px,1vh,10px); }
.jrpps-story h3 { min-height:0; overflow:auto; overflow-x:hidden; padding-bottom:3px; margin-bottom:clamp(6px,1vh,14px); font-size:clamp(16px,min(2.4cqi,3.5vh),38px); line-height:1.12; }
/* Album navigation focuses this static title for assistive technology. Do not
   draw the generic control ring here: overflow clips it into three gold lines.
   Keyboard focus indicators on links and track buttons remain intact. */
.jrpps-browser .jrpps-story h3[tabindex="-1"]:focus { outline:none; }
.jrpps-summary-viewport { --jrpps-fade-height:var(--jrpps-summary-fade-height,40px); grid-column:1/-1; display:flex; min-width:0; min-height:0; overflow:hidden; }
.jrpps-description { flex:1 1 0%; min-width:0; min-height:0; max-height:100%; overflow:auto; overflow-x:hidden; font-size:clamp(13px,min(1.3cqi,2vh),20px); line-height:1.4; scroll-padding-block:4px var(--jrpps-fade-height); }
.jrpps-price { flex:none; font-size:clamp(12px,1.3cqi,18px); margin-bottom:6px; }
.jrpps-story>a.jrpps-purchase {
  flex:0 0 auto; justify-content:center; gap:0; min-height:30px; margin-top:0;
  padding:clamp(7px,1vh,12px) clamp(7px,1.2cqi,22px);
  text-align:center; font-family:"Krona One",sans-serif; font-weight:400;
  font-size:clamp(9px,1cqi,16px); line-height:1.2; letter-spacing:0;
  white-space:nowrap; overflow:hidden; border:1px solid rgba(255,255,255,.5); border-radius:0; background:transparent; color:#fff;
  transform-origin:center; transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.jrpps-story>a.jrpps-purchase:hover,.jrpps-story>a.jrpps-purchase:focus-visible { background:var(--jrpps-accent); border-color:var(--jrpps-accent); color:#fff; transform:scale(var(--jrpps-purchase-hover-scale,1.025)); }
.jrpps-purchase .jrpps-button-label { display:block; flex:none; max-width:100%; white-space:nowrap; overflow-wrap:normal; font-size:var(--jrpps-fit-font,1em); letter-spacing:var(--jrpps-fit-spacing,inherit); }
.jrpps-purchase .jrpps-button-arrow { display:none; }
.jrpps-tracks { min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.jrpps-tracks header { flex:none; min-height:0; padding-bottom:8px; gap:8px; }
.jrpps-tracks header p { font-size:10px; margin-bottom:4px; }
.jrpps-tracks h4 { font-size:clamp(12px,1.2cqi,18px); }
.jrpps-tracks header>span { font-size:9px; }
.jrpps-track-viewport { flex:1 1 auto; min-height:0; max-height:var(--jrpps-list-height); overflow:hidden; display:flex; }
/* Fade the content's alpha, not a colored overlay. At the end, show every row fully. */
.jrpps-track-viewport::after { content:none; }
.jrpps-track-viewport.has-more,.jrpps-summary-viewport.has-more {
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - min(40%,var(--jrpps-fade-height))),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - min(40%,var(--jrpps-fade-height))),transparent 100%);
  mask-mode:alpha;
}
.jrpps-track-list { flex:1 1 0%; min-height:0; max-height:100%; width:100%; scroll-padding-block:4px var(--jrpps-fade-height); }
.jrpps-track {
  position:relative; align-items:center;
  min-height:var(--jrpps-row-height); padding:2px 4px 2px var(--jrpps-row-inset);
  grid-template-columns:18px minmax(0,1fr) minmax(0,1fr); gap:8px;
}
.jrpps-track-title { gap:0; }
.jrpps-track-title strong { font-size:clamp(13px,1.2cqi,18px); line-height:1.1; }
.jrpps-track-title small { display:var(--jrpps-track-meta,none); font-size:9px; line-height:1.1; }
.jrpps-number,.jrpps-time { font-size:10px; }
.jrpps-waveform {
  --jrpps-control-size:min(var(--jrpps-play-size),calc(var(--jrpps-row-height) - 5px));
  height:calc(var(--jrpps-row-height) - 5px); min-height:0;
  grid-template-columns:var(--jrpps-control-size) minmax(0,1fr) 30px; gap:6px;
  margin:0; padding:0; align-self:center; align-content:center; align-items:center; line-height:1;
}
.jrpps-track>.jrpps-waveform { grid-row:1; grid-column:3; }
.jrpps-track>.jrpps-number,.jrpps-track>.jrpps-track-title { grid-row:1; align-self:center; }
.jrpps-waveform>.jrpps-play,.jrpps-waveform>.jrpps-wave,.jrpps-waveform>.jrpps-time { grid-row:1; align-self:center; margin-block:0; }
.jrpps-waveform>.jrpps-time { line-height:1; }
.jrpps-browser .jrpps-track>button.jrpps-track-trigger,
.jrpps-browser .jrpps-track>button.jrpps-track-trigger:hover,
.jrpps-browser .jrpps-track>button.jrpps-track-trigger:focus {
  position:absolute; inset:0; z-index:1; display:block; box-sizing:border-box;
  width:100%; height:100%; min-width:0; min-height:0; max-height:none;
  margin:0; padding:0; border:0; border-radius:0; background:transparent;
  box-shadow:none; appearance:none; -webkit-appearance:none; transform:none;
  cursor:pointer; touch-action:pan-y; outline:none;
}
.jrpps-browser .jrpps-track>button.jrpps-track-trigger::before,
.jrpps-browser .jrpps-track>button.jrpps-track-trigger::after { content:none; }
.jrpps-browser .jrpps-track>button.jrpps-track-trigger:focus-visible { outline:2px solid var(--jrpps-accent); outline-offset:-2px; }
.jrpps-track>audio { display:none; }
.jrpps-play { width:var(--jrpps-control-size); height:var(--jrpps-control-size); }
.jrpps-play svg { width:min(var(--jrpps-icon-size),var(--jrpps-control-size)); height:min(var(--jrpps-icon-size),var(--jrpps-control-size)); }
.jrpps-wave { height:min(var(--jrpps-wave-height),calc(var(--jrpps-row-height) - 5px)); }
.jrpps-story h3,.jrpps-browser-heading,.jrpps-album-rail { scrollbar-width:thin; scrollbar-color:rgba(231,208,161,.3) transparent; }
.jrpps-description { scrollbar-width:none; -ms-overflow-style:none; }
.jrpps-description::-webkit-scrollbar { display:none; width:0; height:0; }
/* Let the browser chain wheel/touch scrolling naturally to the document at
   either boundary. Never intercept scrolling or synthesize page movement. */
.jrpps-browser,.jrpps-selected-album,.jrpps-album-overview,.jrpps-tracks,
.jrpps-summary-viewport,.jrpps-description,.jrpps-track-viewport,.jrpps-track-list { overscroll-behavior:auto; }
@container jrpps (max-width:700px) {
  .jrpps-selected-album { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1.1fr); gap:12px; }
  .jrpps-album-overview { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:8px 14px; }
  .jrpps-album-overview:has(.jrpps-description) { grid-template-rows:minmax(0,1fr) minmax(0,.4fr); }
  .jrpps-story h3 { font-size:clamp(14px,min(4cqi,2.6vh),24px); margin-bottom:4px; }
  .jrpps-story>p { font-size:8px; letter-spacing:.08em; margin-bottom:4px; }
  .jrpps-story>a.jrpps-purchase { margin-top:0; min-height:26px; padding:6px 8px; font-size:clamp(9px,2cqi,12px); }
  .jrpps-description { font-size:12px; }
  .jrpps-tracks header>span { display:none; }
  .jrpps-tracks header { padding-bottom:4px; }
  .jrpps-tracks header p { display:none; }
  .jrpps-track { grid-template-columns:16px minmax(0,1fr) minmax(0,1fr); gap:6px; }
  .jrpps-track-title strong { font-size:14px; }
  .jrpps-waveform { --jrpps-play-size:22px; grid-column:auto; grid-template-columns:var(--jrpps-control-size) minmax(0,1fr) 28px; gap:4px; }
  .jrpps-number { grid-row:auto; }
}
/* Dense desktop rows remain comfortable tap targets on touch screens. */
@media(pointer:coarse) { .jrpps-browser { --jrpps-row-height:44px; --jrpps-play-size:32px; } }
@media(max-height:520px) {
  .jrpps-browser { padding:4px; }
  .jrpps-selected-album { padding:6px; gap:8px; }
  .jrpps-album-overview { gap:6px; }
  .jrpps-story>p { display:none; }
  .jrpps-story h3 { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .jrpps-story>a.jrpps-purchase { transition:none; transform:none; } }