/* Passport Media player — ppm- namespace only (never llap-). */
.ppm{--ppm-accent:#4f6a4c;--ppm-ink:#2f342b;--ppm-muted:#7c8273;--ppm-line:#dcd6c8;--ppm-track:#e2ddd0;
  --ppm-bg1:#faf8f3;--ppm-bg2:#f0ebe0;--ppm-maxw:560px;--ppm-radius:18px;
  --ppm-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--ppm-font-title:var(--ppm-font-body);
  max-width:var(--ppm-maxw);margin:1.5rem auto;padding:1.5rem 1.4rem 1.2rem;background:linear-gradient(160deg,var(--ppm-bg1),var(--ppm-bg2));
  border:1px solid var(--ppm-line);border-radius:var(--ppm-radius);box-shadow:0 14px 38px -22px rgba(60,70,50,.55);
  font-family:var(--ppm-font-body);color:var(--ppm-ink);box-sizing:border-box}
.ppm *{box-sizing:border-box}
.ppm button{-webkit-appearance:none!important;appearance:none!important;margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;min-height:0!important;min-width:0!important;height:auto;
  line-height:normal!important;letter-spacing:normal!important;text-transform:none!important;font:inherit;color:var(--ppm-accent);text-shadow:none!important;transform:none}
.ppm-preview-badge{display:inline-block;background:#b45309;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.25rem .6rem;border-radius:6px;margin-bottom:.8rem}
.ppm-gate{text-align:center;padding:2rem 1.4rem}
.ppm-gate .ppm-login{display:inline-block;background:var(--ppm-accent);color:#fff;padding:.6rem 1.4rem;border-radius:10px;text-decoration:none;font-weight:600}
.ppm-now{display:flex!important;align-items:center;justify-content:center;gap:.95rem;margin-bottom:1.1rem}
.ppm-art{flex:0 0 56px;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--ppm-accent) 70%,#fff 30%),var(--ppm-accent));box-shadow:inset 0 1px 4px rgba(255,255,255,.3)}
.ppm-art svg{display:block}
.ppm-meta{min-width:0;text-align:center}
.ppm-eyebrow{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ppm-accent);font-weight:700}
.ppm-title{font-family:var(--ppm-font-title);font-size:1.14rem;font-weight:600;line-height:1.25;margin:.12rem 0 .15rem}
.ppm-counter{font-size:.78rem;color:var(--ppm-muted)}
.ppm-seek{display:flex!important;align-items:center;gap:.7rem;margin-bottom:.7rem}
.ppm-time{font-size:.74rem;color:var(--ppm-muted);min-width:34px;text-align:center;font-variant-numeric:tabular-nums;flex:0 0 auto}
.ppm-progress,.ppm-volume{-webkit-appearance:none!important;appearance:none!important;height:5px;border-radius:5px;background:var(--ppm-track);cursor:pointer;outline:none;padding:0!important;margin:0;border:0}
.ppm-progress{flex:1 1 auto;width:auto}
.ppm-progress::-webkit-slider-thumb,.ppm-volume::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ppm-accent);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ppm-progress::-moz-range-thumb,.ppm-volume::-moz-range-thumb{width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:var(--ppm-accent)}
.ppm-controls{display:flex!important;flex-wrap:nowrap;align-items:center;justify-content:center;gap:.55rem;margin:.4rem 0 1rem}
.ppm-btn{display:grid!important;place-items:center;cursor:pointer;border-radius:50%!important;background:transparent!important;transition:background .15s,transform .1s;flex:0 0 auto}
.ppm-btn:hover{background:color-mix(in srgb,var(--ppm-accent) 14%,transparent)!important}
.ppm-btn:active{transform:scale(.93)}
.ppm-btn svg{display:block}
.ppm-prev,.ppm-next{width:44px;height:44px}
.ppm-skip{width:48px;height:48px}
.ppm button.ppm-play{width:58px!important;height:58px!important;background:color-mix(in srgb,var(--ppm-accent) 85%,#fff 15%)!important;color:#fff!important;border-radius:50%!important}
.ppm button.ppm-play:hover{background:var(--ppm-accent)!important}
.ppm-extras{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;border-top:1px solid var(--ppm-line);margin-bottom:.4rem}
.ppm-speed{display:flex!important;align-items:center;gap:.55rem;font-size:.78rem;color:var(--ppm-muted)}
.ppm-rate{border:1px solid var(--ppm-line)!important;background:#fff!important;color:var(--ppm-accent);font-weight:700;font-size:.82rem;padding:.32rem .6rem!important;border-radius:8px!important;cursor:pointer;min-width:46px!important}
.ppm-vol{display:flex!important;align-items:center;gap:.5rem;color:var(--ppm-muted)}
.ppm-volume{width:90px;flex:0 0 auto}
.ppm-list{list-style:none!important;margin:.8rem 0 0!important;padding:0!important;max-height:320px;overflow-y:auto}
.ppm-item{display:flex!important;align-items:center;gap:.6rem;padding:.6rem .55rem;margin:0;border-radius:10px;cursor:pointer;font-size:.92rem;color:var(--ppm-ink);transition:background .12s;list-style:none!important;text-align:left!important}
.ppm-item:hover{background:color-mix(in srgb,var(--ppm-accent) 10%,transparent)}
.ppm-item.ppm-active{background:color-mix(in srgb,var(--ppm-accent) 18%,transparent);font-weight:600;color:var(--ppm-accent)}
.ppm-item.ppm-locked{cursor:default;color:var(--ppm-muted)}
.ppm-item.ppm-locked:hover{background:transparent}
.ppm-item-title{flex:1 1 auto;min-width:0}
.ppm-check{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:2px solid var(--ppm-line);
  position:relative;box-sizing:border-box;transition:background .15s,border-color .15s}
.ppm-item.ppm-done .ppm-check{border-color:var(--ppm-accent);background:var(--ppm-accent)}
/* Tick drawn as a masked SVG path: fixed geometry inside the circle, so it
   cannot overflow the border-radius and get clipped (the previous rotated
   border-box did, and ignored box-sizing so the border made it larger still). */
.ppm-item.ppm-done .ppm-check::after{content:"";position:absolute;inset:0;
  background-color:#fff;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.3l2.9 2.9 5.9-6.1' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.3l2.9 2.9 5.9-6.1' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
/* Fallback for engines without mask support: an inset rotated tick sized to
   stay within the circle even unmasked. */
@supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .ppm-item.ppm-done .ppm-check::after{background-color:transparent;
    width:5px;height:9px;inset:auto;top:2px;left:5px;
    border:2px solid #fff;border-top:0;border-left:0;border-radius:1px;
    box-sizing:border-box;transform:rotate(38deg)}
}
.ppm-lock{font-size:.78rem;color:var(--ppm-muted);white-space:nowrap}
.ppm-dur-label{font-size:.76rem;color:var(--ppm-muted);font-variant-numeric:tabular-nums}
@media (max-width:480px){
  .ppm{padding:1.2rem 1rem 1rem;border-radius:14px;margin:1rem auto}
  .ppm-controls{gap:.3rem}
  .ppm-prev,.ppm-next{width:42px;height:42px}
  .ppm-skip{width:46px;height:46px}
  .ppm-skip svg{width:32px;height:32px}
  .ppm button.ppm-play{width:56px!important;height:56px!important}
  .ppm-vol{flex:1 1 100%;justify-content:space-between}
  .ppm-volume{flex:1 1 auto;width:auto;margin-left:.7rem}
  .ppm-progress,.ppm-volume{height:6px}
  .ppm-progress::-webkit-slider-thumb,.ppm-volume::-webkit-slider-thumb{width:18px;height:18px}
  .ppm-list{max-height:280px}
}
@media (hover:none){
  .ppm-item:hover{background:transparent}
  .ppm-item.ppm-active:hover{background:color-mix(in srgb,var(--ppm-accent) 18%,transparent)}
  .ppm-btn:hover{background:transparent!important}
  .ppm button.ppm-play:hover{background:color-mix(in srgb,var(--ppm-accent) 85%,#fff 15%)!important}
}

/* ── Style-tab modifiers ─────────────────────────────────── */
.ppm.ppm-left .ppm-now{justify-content:flex-start}
.ppm.ppm-left .ppm-meta{text-align:left}
.ppm.ppm-no-art .ppm-art{display:none}
.ppm.ppm-no-durs .ppm-dur-label{display:none}
.ppm.ppm-numbers .ppm-list{counter-reset:ppmtrack}
.ppm.ppm-numbers .ppm-item-title::before{counter-increment:ppmtrack;content:counter(ppmtrack) ".\00a0\00a0";color:var(--ppm-muted);font-variant-numeric:tabular-nums}
.ppm.ppm-compact{padding:1rem .95rem .8rem}
.ppm.ppm-compact .ppm-now{margin-bottom:.7rem;gap:.7rem}
.ppm.ppm-compact .ppm-art{flex-basis:44px;width:44px;height:44px;border-radius:11px}
.ppm.ppm-compact .ppm-controls{margin:.25rem 0 .6rem;gap:.35rem}
.ppm.ppm-compact button.ppm-play{width:50px!important;height:50px!important}
.ppm.ppm-compact .ppm-prev,.ppm.ppm-compact .ppm-next{width:38px;height:38px}
.ppm.ppm-compact .ppm-skip{width:42px;height:42px}
.ppm.ppm-compact .ppm-extras{padding-top:.6rem}
.ppm.ppm-compact .ppm-item{padding:.42rem .5rem;font-size:.88rem}
.ppm.ppm-compact .ppm-check{flex-basis:16px;width:16px;height:16px}
.ppm.ppm-compact .ppm-list{max-height:260px}
/* ── alpha.3: descriptions + downloads ───────────────────── */
.ppm-item-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.ppm-item-main .ppm-item-title{flex:none}
.ppm-item-desc{font-size:.76rem;color:var(--ppm-muted);line-height:1.35}
.ppm-item.ppm-active .ppm-item-desc{color:color-mix(in srgb,var(--ppm-accent) 70%,var(--ppm-muted) 30%)}
.ppm.ppm-compact .ppm-item-desc{display:none}
.ppm-dl{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:var(--ppm-muted);flex:0 0 auto;transition:color .15s,background .15s}
.ppm-dl:hover{color:var(--ppm-accent);background:color-mix(in srgb,var(--ppm-accent) 12%,transparent)}
@media (hover:none){.ppm-dl:hover{background:transparent;color:var(--ppm-muted)}}

.ppm-preview-badge.ppm-preview-live{background:#1d4ed8;letter-spacing:.05em;text-transform:none;font-size:.72rem}
