/* WELL AP 通勤 Podcast — hub page + global bottom player (teal theme) */
:root{
  --teal:#008F7A; --teal-700:#00715F; --teal-50:#E6F4F1; --teal-lt:#4cc4ae;
  --bg:#fdfdfd; --bg-soft:#f6f8f7; --card:#ffffff; --line:#e4e9e7;
  --text:#1a1f1c; --text-soft:#4d5250; --text-mute:#7d8280;
  --pre:#B4233B; --pre-bg:#FBEAED; --opt:#00715F; --opt-bg:#E6F4F1;
  --radius:12px; --radius-sm:7px; --maxw:880px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:"Noto Sans TC",system-ui,sans-serif;color:var(--text);
  background:var(--bg);font-size:18px;line-height:1.75;-webkit-text-size-adjust:100%;}
a{color:var(--teal-700);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Topbar (matches lectures hub) */
.topbar{position:sticky;top:0;z-index:20;background:rgba(253,253,253,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;
  align-items:center;gap:14px;}
.brand{font-weight:700;font-size:18px;color:var(--teal-700);white-space:nowrap;}
.brand b{background:var(--teal);color:#fff;border-radius:6px;padding:2px 7px;margin-right:8px;font-size:15px;}
.topbar .sp{flex:1;}
.topbar a.nav{font-size:15px;color:var(--text-soft);}
.topbar a.nav.on{color:var(--teal-700);font-weight:700;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:28px 20px 120px;}
h1{font-size:30px;line-height:1.3;margin:.2em 0 .1em;letter-spacing:.5px;}
.lede{font-size:18px;color:var(--text-soft);margin:0 0 14px;text-wrap:pretty;}
.note{font-size:14.5px;color:var(--text-mute);background:var(--bg-soft);
  border-radius:var(--radius-sm);padding:10px 14px;margin:18px 0 26px;}
.note b{color:var(--text-soft);}

/* Login gate (shown until member logs in) */
.login-gate{display:flex;justify-content:center;padding:6vh 0 4vh;}
.login-gate[hidden]{display:none;}
.lg-card{max-width:460px;width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px 30px;text-align:center;box-shadow:0 4px 20px rgba(0,143,122,.06);}
.lg-title{font-size:21px;font-weight:700;color:var(--text);margin-bottom:8px;}
.lg-sub{font-size:15.5px;color:var(--text-soft);line-height:1.7;margin:0 0 22px;text-wrap:pretty;}
.lg-btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border:none;
  border-radius:8px;font-size:16px;font-weight:600;padding:12px 26px;cursor:pointer;transition:background .15s;font-family:inherit;}
.lg-btn:hover{background:var(--teal-700);}
.lg-alt{margin-top:16px;font-size:14.5px;}
#epArea[hidden]{display:none;}

/* Episode list */
.ep-list{display:flex;flex-direction:column;gap:12px;}
.ep-card{display:flex;align-items:center;gap:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  cursor:pointer;transition:.15s;text-align:left;width:100%;font:inherit;color:inherit;}
.ep-card:hover{border-color:var(--teal);box-shadow:0 4px 16px rgba(0,143,122,.10);transform:translateY(-1px);}
.ep-card.playing{border-color:var(--teal);background:var(--teal-50);}

/* Play button */
.ep-play{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--teal);
  color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s;}
.ep-card:hover .ep-play{background:var(--teal-700);}
.ep-play svg{display:block;}
.ep-card.playing .ep-icon-play{display:none;}
.ep-icon-pause{display:none;}
.ep-card.playing .ep-icon-pause{display:block;}

/* Episode text */
.ep-text{flex:1;min-width:0;}
.ep-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.ep-id{font-family:"JetBrains Mono",monospace;color:var(--teal);font-weight:700;font-size:14px;}
.ep-name{font-size:19px;font-weight:700;color:var(--text);}
.ep-name .en{font-weight:500;color:var(--text-mute);font-size:16px;margin-left:4px;}
.ep-meta{font-size:13.5px;color:var(--text-mute);margin-top:2px;}
.ep-meta .dur{font-variant-numeric:tabular-nums;}
.ep-desc{font-size:14.5px;color:var(--text-soft);margin-top:6px;line-height:1.6;text-wrap:pretty;}

@media(max-width:600px){
  body{font-size:17px;} h1{font-size:25px;} .wrap{padding:20px 15px 110px;}
  .brand{font-size:16px;} .ep-card{padding:14px 14px;gap:12px;}
  .ep-name{font-size:17px;} .ep-name .en{display:block;margin:2px 0 0;font-size:14px;}
  .ep-desc{display:none;}
}

/* ===== Global bottom player (ported from sustainability-100, teal) ===== */
.gp{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#15201d;color:#fff;
  font-family:-apple-system,"Noto Sans TC",sans-serif;box-shadow:0 -2px 12px rgba(0,0,0,.3);
  transition:transform .3s ease;-webkit-user-select:none;user-select:none;}
.gp--hidden{transform:translateY(100%);pointer-events:none;}
.gp-progress{height:4px;background:rgba(255,255,255,.15);cursor:pointer;position:relative;
  padding:8px 0;margin:-8px 0;background-clip:content-box;}
.gp-progress-fill{height:4px;background:var(--teal-lt);width:0%;border-radius:2px;
  pointer-events:none;transition:width .2s linear;}
.gp-body{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;max-width:1100px;margin:0 auto;}
.gp-controls{display:flex;align-items:center;gap:.2rem;flex-shrink:0;}
.gp-btn{background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer;padding:6px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;
  transition:color .15s,background .15s;}
.gp-btn:hover{color:#fff;background:rgba(255,255,255,.1);}
.gp-btn--play{min-width:44px;min-height:44px;background:var(--teal);color:#fff;border-radius:50%;}
.gp-btn--play:hover{background:var(--teal-lt);}
.gp-btn--close{font-size:1.2rem;opacity:.5;}
.gp-btn--close:hover{opacity:1;}
.gp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
.gp-title{color:#fff;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-decoration:none;}
.gp-title:hover{text-decoration:underline;color:var(--teal-lt);}
.gp-time{font-size:.7rem;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;}
.gp-right{display:flex;align-items:center;gap:.3rem;flex-shrink:0;}
.gp-speed{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);
  border-radius:4px;font-size:.75rem;padding:2px 4px;cursor:pointer;}
.gp-speed option{background:#15201d;color:#fff;}
body.gp-active{padding-bottom:68px;}
@media(max-width:600px){
  .gp-body{padding:.4rem .6rem;gap:.4rem;} .gp-title{font-size:.78rem;}
}
/* Resume banner */
.gp-resume{position:fixed;bottom:0;left:0;right:0;z-index:9998;background:var(--teal);color:#fff;
  text-align:center;padding:.8rem 1rem;cursor:pointer;font-size:.9rem;box-shadow:0 -2px 12px rgba(0,0,0,.2);
  transition:transform .3s ease;}
.gp-resume:hover{background:var(--teal-700);}