/* DjC player — consumer surface. Reuses the tab4 player engine's generated
   markup (#panel-player) and re-dresses it to match the DjC homepage:
   warm cream ground, terracotta accents, rounded editorial cards.
   Palette tokens come from styles.css (:root). */

body.player{
  padding:0;
  background:var(--cream);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.player a{color:inherit;text-decoration:none;}

/* ---- top bar ---- */
.player-bar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.player-bar .inner{
  max-width:640px;margin:0 auto;padding:0 22px;height:62px;
  display:flex;align-items:center;justify-content:space-between;
}
.player-bar .wordmark{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text);}
.player-bar .wordmark span{color:var(--accent);}
.player-bar .who{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--text-muted);}
.player-bar .who button,
.player-bar .who a.login-link{
  background:none;border:1px solid var(--border-strong);border-radius:999px;
  padding:7px 15px;font-size:12.5px;color:var(--text);cursor:pointer;font-family:inherit;
}
.player-bar .who button:hover,
.player-bar .who a.login-link:hover{background:#fff;border-color:var(--text-muted);}

/* ---- layout ---- */
.player-wrap{max-width:640px;margin:0 auto;padding:44px 22px 120px;}
.player-wrap .lede{text-align:center;margin-bottom:32px;}
.player-wrap .lede h1{
  font-size:clamp(1.9rem,5vw,2.5rem);font-weight:800;letter-spacing:-.03em;
  margin:0 0 8px;line-height:1.08;
}
.player-wrap .lede p{font-size:1rem;color:var(--text-muted);margin:0;}

/* ---- the engine's cards, re-dressed ---- */
body.player #panel-player{display:flex;flex-direction:column;gap:18px;}
body.player #panel-player .card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  margin:0;
  box-shadow:0 1px 2px rgba(42,35,32,.04), 0 10px 30px rgba(42,35,32,.06);
}
/* brand accent on the primary card */
body.player #panel-player .card:first-child{
  border-top:3px solid var(--accent);
  padding-top:22px;
}
body.player #panel-player .card h2{
  font-size:1.05rem;font-weight:800;letter-spacing:-.01em;text-transform:none;
  color:var(--text);margin:0 0 16px;display:flex;align-items:center;gap:8px;
}
body.player #panel-player .card h2::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
}
body.player #panel-player .file-info{color:var(--text-muted);font-size:12.5px;}

/* song picker — the main call to action of the page */
body.player #panel-player #playerSongSelect{
  -webkit-appearance:none;appearance:none;
  width:100%;font-size:15px;font-weight:600;color:var(--text);
  padding:15px 44px 15px 16px;border-radius:14px;
  border:1.5px solid var(--border-strong);background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23DB7F67' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  cursor:pointer;
}
body.player #panel-player #playerSongSelect:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
body.player #panel-player select,
body.player #panel-player input[type=text],
body.player #panel-player input[type=number]{
  font-size:14px;padding:10px 12px;border-radius:10px;border-color:var(--border-strong);
}

/* audio transport — tuck the native bar into a warm rounded strip */
body.player #panel-player audio{
  width:100%;height:46px;margin-top:16px;border-radius:12px;
  accent-color:var(--accent);
  background:var(--cream);
  border:1px solid var(--border);
}
body.player #panel-player audio::-webkit-media-controls-enclosure{
  background:var(--cream);border-radius:12px;
}
body.player #panel-player audio::-webkit-media-controls-panel{background:var(--cream);}

/* buttons */
body.player #panel-player .btn{
  border-radius:999px;padding:9px 18px;font-weight:700;font-size:13px;
}
body.player #panel-player .btn.secondary{
  border-radius:999px;background:#fff;border-color:var(--border-strong);
}
body.player #panel-player .btn.secondary:hover{background:var(--cream);}
body.player #panel-player .icon-btn{
  width:34px;height:34px;border-radius:999px;font-size:15px;border-color:var(--border-strong);
}
body.player #panel-player .icon-btn:hover{background:var(--cream);border-color:var(--accent);}

/* prediction rows → roomy tappable cards, terracotta primary action */
body.player #panel-player #predictionsList{margin-top:6px;}
body.player #panel-player #predictionsList .seq-item{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;margin-bottom:12px;
  transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
body.player #panel-player #predictionsList .seq-item:last-child{margin-bottom:0;}
body.player #panel-player #predictionsList .seq-item:hover{
  border-color:var(--accent);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(42,35,32,.07);
}
body.player #panel-player .seq-name{font-size:14.5px;font-weight:700;}
body.player #panel-player .confidence-tag{
  display:inline-block;background:var(--accent-soft);color:var(--accent-strong);
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.01em;
}
body.player #panel-player #predictionsList .btn.secondary[id^="playNext"]{
  background:var(--accent);color:#fff;border:none;
}
body.player #panel-player #predictionsList .btn.secondary[id^="playNext"]:hover{background:var(--accent-strong);}

/* banners: up-next prompt, "switching now", cut feedback */
body.player #panel-player #autoBanner,
body.player #panel-player #suggestionBanner{
  border-radius:14px;padding:15px 16px;font-size:13.5px;line-height:1.55;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color:var(--text);
}
body.player #panel-player #autoBanner .btn,
body.player #panel-player #suggestionBanner .btn{margin-top:4px;}

/* checkboxes / labels in the auto-mix card */
body.player #panel-player label{color:var(--text);}
body.player #panel-player input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;}
body.player #panel-player input[type=range]{accent-color:var(--accent);}

/* advanced knobs are power-user — keep, but recede */
body.player #panel-player details{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);opacity:.72;
}
body.player #panel-player details[open]{opacity:1;}
body.player #panel-player details summary{font-size:12px;color:var(--text-muted);}

/* the per-song "force auto-mix" toggle is an admin-era escape hatch — hide it */
body.player #panel-player label:has(#autoModeToggle){display:none;}

/* ---- soft sign-up gate ---- */
.gate-overlay{
  position:fixed;inset:0;z-index:2000;
  background:color-mix(in srgb, var(--cream) 78%, transparent);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.gate-box{
  background:#fff;border:1px solid var(--border);border-radius:22px;
  padding:36px 32px;max-width:390px;width:100%;text-align:center;
  box-shadow:0 24px 70px rgba(42,35,32,.2);
}
.gate-mark{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px;color:var(--text);}
.gate-mark span{color:var(--accent);}
.gate-box h2{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:var(--text);text-transform:none;}
.gate-box p{font-size:.95rem;line-height:1.55;color:var(--text-muted);margin:0 0 24px;}
.gate-cta{
  display:block;background:var(--accent);color:#fff;border-radius:999px;
  padding:13px 20px;font-size:14px;font-weight:800;
}
.gate-cta:hover{background:var(--accent-strong);}
.gate-alt{display:block;margin-top:14px;font-size:13px;color:var(--text-muted);}
.gate-alt:hover{color:var(--text);}