/* Styles for the two parts of the site that talk to a server:
   the real podcast search results panel and the launch list panel.
   Both use the established dark, lime-bordered console language, so they read
   the same on the light marketing pages and inside the app shell. */

.pg-results{
  width:100%;
  background:#0D2721;
  border:2px solid rgba(181,214,65,.42);
  border-radius:3px;
  text-align:left;
  overflow:hidden;
}
.pg-results-hero{max-width:640px;margin-top:16px}

/* Entrance for a panel that appears in response to an action. The
   reduced-motion blocks on every page flatten this to nothing. */
@keyframes pg-panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.pg-in{animation:pg-panel-in .18s ease-out both}

.pg-state{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:18px;
  font:400 14px/1.5 'Public Sans',system-ui,-apple-system,sans-serif;
  color:rgba(255,255,255,.76);
  text-wrap:pretty;
}
.pg-state strong{display:block;font:700 15px/1.35 'Public Sans',system-ui;color:#fff;margin-bottom:4px}
.pg-state .pg-spinner{
  flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  border:2px solid rgba(181,214,65,.3);border-top-color:#B5D641;
  animation:pg-spin .8s linear infinite;
}
@keyframes pg-spin{to{transform:rotate(360deg)}}

.pg-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
}
.pg-head-text{font:600 12px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(181,214,65,.9)}
.pg-close{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border-radius:3px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72);
  transition:border-color .2s ease-out,color .2s ease-out,background-color .2s ease-out;
}
.pg-close:hover{border-color:#B5D641;color:#B5D641;background:rgba(181,214,65,.1)}
.pg-close svg{width:16px;height:16px}

.pg-list{list-style:none;margin:0;padding:0;max-height:min(58vh,460px);overflow-y:auto}
.pg-show{border-top:1px solid rgba(255,255,255,.08)}
.pg-show:first-child{border-top:0}
.pg-show-main{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;border-radius:2px}
.pg-show-main:hover{background:rgba(181,214,65,.07)}
.pg-show-main:focus-visible{outline:2px solid #B5D641;outline-offset:-2px}
.pg-show-art{
  flex:none;width:56px;height:56px;border-radius:5px;overflow:hidden;background:#1B4238;
}
.pg-show-art img{width:100%;height:100%;object-fit:cover}
.pg-show-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pg-show-title{font:700 15px/1.3 'Public Sans',system-ui;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-show-pub{font:400 13px/1.3 'Public Sans',system-ui;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-show-btn{
  flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;
  border-radius:3px;cursor:pointer;white-space:nowrap;
  background:transparent;border:1px solid rgba(255,255,255,.26);color:#fff;
  font:600 13px/1 'Public Sans',system-ui;
  transition:border-color .2s ease-out,color .2s ease-out,background-color .2s ease-out,transform .12s ease-out;
}
.pg-show-btn:hover{border-color:#B5D641;color:#B5D641;background:rgba(181,214,65,.1)}
.pg-show-btn:active{transform:translateY(1px)}
.pg-show-btn svg{width:16px;height:16px;transition:transform .2s ease-out}
.pg-show-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.pg-eps{background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.08);padding:4px 16px 12px}
.pg-ep{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07);text-decoration:none}
.pg-ep:first-child{border-top:0}
.pg-ep[href]{cursor:pointer;transition:background-color .18s ease-out,padding-left .18s ease-out}
.pg-ep[href]:hover,.pg-ep[href]:focus-visible{background:rgba(181,214,65,.08);padding-left:6px;outline:0}
.pg-ep-title{font:600 14px/1.35 'Public Sans',system-ui;color:#fff;text-wrap:pretty}
.pg-ep-meta{font:400 12px/1.3 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.55)}
.pg-eps-note{padding:10px 0 2px;font:400 12px/1.45 'Public Sans',system-ui;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.07);text-wrap:pretty}

.pg-foot{padding:11px 16px;border-top:1px solid rgba(255,255,255,.1);font:400 12px/1.45 'Public Sans',system-ui;color:rgba(255,255,255,.5)}

.pg-retry{
  display:inline-flex;align-items:center;justify-content:center;margin-top:10px;
  height:40px;padding:0 16px;border-radius:3px;cursor:pointer;
  background:#B5D641;border:2px solid #B5D641;color:#12332C;font:700 14px/1 'Public Sans',system-ui;
  transition:background-color .2s ease-out,border-color .2s ease-out,transform .12s ease-out;
}
.pg-retry:hover{background:#C6E357;border-color:#C6E357}
.pg-retry:active{background:#A3C22F;border-color:#A3C22F;transform:translateY(1px)}

/* Launch list panel */
.pg-wait{
  width:100%;margin-top:16px;
  background:#12332C;border:2px solid #B5D641;border-radius:3px;
  padding:18px;display:flex;flex-direction:column;gap:14px;text-align:left;
}
.pg-wait-top{display:flex;align-items:flex-start;gap:14px}
.pg-wait-lede{
  flex:1;margin:0;
  font:400 14px/1.55 'Public Sans',system-ui;color:rgba(255,255,255,.86);text-wrap:pretty;
}
.pg-wait-form{display:flex;gap:10px;flex-wrap:wrap}
.pg-wait-form input[type="email"]{
  flex:1;min-width:200px;height:48px;padding:0 14px;
  background:rgba(0,0,0,.32);border:2px solid rgba(181,214,65,.42);border-radius:3px;
  font:500 16px/1 'Public Sans',system-ui;color:#fff;caret-color:#B5D641;
  transition:border-color .2s ease-out,background-color .2s ease-out;
}
.pg-wait-form input[type="email"]::placeholder{color:rgba(255,255,255,.45)}
.pg-wait-form input[type="email"]:focus{outline:0;border-color:#B5D641;background:rgba(0,0,0,.42)}
.pg-wait-go{
  flex:none;height:48px;padding:0 18px;border-radius:3px;cursor:pointer;
  background:#B5D641;border:2px solid #B5D641;color:#12332C;font:700 15px/1 'Public Sans',system-ui;
  transition:background-color .2s ease-out,border-color .2s ease-out,transform .12s ease-out;
}
.pg-wait-go:hover{background:#C6E357;border-color:#C6E357}
.pg-wait-go:active{transform:translateY(1px)}
.pg-wait-go[disabled]{opacity:.6;cursor:default;transform:none}
.pg-wait-msg{margin:0;font:600 14px/1.5 'Public Sans',system-ui;color:#F2B8B0;text-wrap:pretty}
.pg-wait-done{display:flex;flex-direction:column;gap:6px}
.pg-wait-done strong{font:700 17px/1.25 'Public Sans',system-ui;color:#B5D641}
.pg-wait-done span{font:400 14px/1.55 'Public Sans',system-ui;color:rgba(255,255,255,.8);text-wrap:pretty}
.pg-wait-fine{margin:0;font:400 12px/1.5 'Public Sans',system-ui;color:rgba(255,255,255,.55);text-wrap:pretty}
.pg-wait-fine a{color:#B5D641;text-decoration:underline;text-underline-offset:2px}
.pg-wait-fine a:hover{color:#C6E357}

/* Honeypot. Never shown, never announced, never focusable by keyboard. */
.pg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pg-noscript{margin:12px 0 0;font:400 13px/1.5 'Public Sans',system-ui;color:rgba(255,255,255,.62);text-wrap:pretty}
.pg-noscript-light{color:#6B665D}

@media (max-width:560px){
  .pg-show-main{flex-wrap:wrap}
  .pg-show-body{flex:1 1 100%;order:2}
  .pg-show-art{order:1}
  .pg-show-btn{order:3;width:100%;justify-content:center}
  .pg-wait-go{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .pg-spinner{animation-duration:1.6s !important}
}