/* =========================================================
   Harmura Embed Player — Clean CSS
   ========================================================= */

/* ---------- Theme tokens ---------- */

:root{
  --bg:#0b1530;     /* page bg (embed)    */
  --fg:#e9f0ff;     /* text               */
  --muted:#b7c2da;  /* secondary text     */
  --line:#223058;   /* borders            */
  --pill:#0f1d40;   /* chips/buttons      */
  --accent:#7aa2ff; /* sliders/icons      */
}

/* ---------- Base / resets ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
a{ color:var(--accent); }

/* Clamp long text nicely */
.title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Card layout ---------- */
.wrap{ max-width:720px; margin:0 auto; padding:0; }
.card{
  position:relative;
  background:#0e1c3e; border:1px solid var(--line); border-radius:16px;
  padding:14px; display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:center;
}
.cover{
  width:110px; height:110px; border-radius:10px; border:1px solid var(--line);
  object-fit:cover; background:#0b0b0c;
}
.title{ margin:0; font-size:18px; line-height:1.25; }
.title a{ color:var(--fg); text-decoration:none; }
.title a:hover{ text-decoration:underline; }
.meta{
  margin:6px 0 10px; color:var(--muted); font-size:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.badge{
  display:inline-grid; place-items:center; width:18px; height:18px;
  border-radius:4px; background:var(--pill); color:var(--fg);
  font-size:12px; font-weight:700; border:1px solid var(--line);
}

/* =========================================================
   Audio Player
   ========================================================= */
.player.dark{ margin-top:6px; }
.player.dark .ui{
  display:grid; grid-template-columns:auto auto 1fr auto auto;
  gap:10px; align-items:center;
  background:#0c1a38; border:1px solid var(--line);
  border-radius:999px; padding:8px 12px;
}

/* Buttons */
.player.dark .btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  border:none; background:#0b1530; color:#e9f0ff;
  box-shadow:inset 0 0 0 1px var(--line); border-radius:999px;
  width:32px; height:32px; display:grid; place-items:center;
}
.player.dark .btn:hover{ background:#0d1a3a; }
.player.dark .btn svg{ width:16px; height:16px; }

/* Time + Seek */
.player.dark .time{ color:var(--muted); font-size:13px; white-space:nowrap; }
.player.dark input[type="range"]{ accent-color:var(--accent); }
.player.dark .seek{
  width:100%; height:6px; border-radius:999px; background:#1b2b53; outline:none;
}
.player.dark .seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent);
}
.player.dark .seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent); border:none;
}

/* Playback rate */
.player.dark .rate{
  background:#0b1530; color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:2px 6px;
}

/* Volume (icon + collapsible slider) */
.player.dark .vol-wrap{ display:flex; align-items:center; gap:8px; }
.player.dark .btn.vol{ width:32px; height:32px; }
.player.dark .vol{
  width:0; opacity:0; pointer-events:none; transition:width .18s ease, opacity .18s ease;
  height:6px; border-radius:999px; background:#1b2b53; outline:none;
}
.player.dark .vol::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent);
}
.player.dark .vol::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent); border:none;
}
.player.dark .vol-wrap.open .vol{ width:120px; opacity:1; pointer-events:auto; }

/* =========================================================
   Services Overlay (Listen On…)
   - Launcher in top-right of .card
   - Overlay covers embed; sheet is compact 2×3 grid
   ========================================================= */
.svc{ position:absolute; top:12px; right:12px; z-index:3; }

/* launcher: high-contrast on dark bg */
.svc-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  width:36px; height:36px; border-radius:50%;
  border:1px solid #3a56a1; background:#132552; color:#e9f0ff;
  display:grid; place-items:center;
  box-shadow:0 0 0 2px rgba(122,162,255,.12) inset;
}
.svc-btn:hover{ background:#163067; }

/* Hide launcher when open */
.svc.open .svc-btn{ visibility:hidden; }

/* Overlay: hidden by default; shown when .svc.open */
.svc-menu.svc-overlay{
  display:none !important;
  position:fixed !important; inset:0 !important; z-index:9999;
  background:rgba(8,14,34,.78); backdrop-filter:blur(2px);
  place-items:center; padding:0 !important;
}
.svc.open .svc-menu.svc-overlay{ display:grid !important; }

/* Close button (where launcher sits) */
.svc-menu.svc-overlay .svc-close{
  position:fixed; top:10px; right:10px;
  width:38px; height:38px; border-radius:50%;
  border:1px solid #3a56a1; background:#132552; color:#e9f0ff;
  display:grid; place-items:center; cursor:pointer;
}
.svc-menu.svc-overlay .svc-close:hover{ background:#163067; }

/* Sheet panel */
.svc-menu.svc-overlay .svc-panel{
  width:min(520px, 94vw);
  max-height:80vh;
  margin:48px auto 20px;
  padding:10px;
  border-radius:12px;
  background:#0d1b3b; border:1px solid #23335c;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  display:grid; grid-template-columns:repeat(2, minmax(200px,1fr));
  gap:8px; overflow:auto;
}
@media (max-width:560px){
  .svc-menu.svc-overlay .svc-panel{ grid-template-columns:1fr; width:calc(100% - 24px); }
}

/* Header + rows */
.svc-menu.svc-overlay .svc-hint{
  grid-column:1 / -1; padding:4px 6px 8px;
  color:#b7c2da; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
}
.svc-menu.svc-overlay .svc-item{
  width:100%; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.04); color:#e9f0ff; text-decoration:none;
  display:flex; align-items:center; gap:12px;
  transition:background .12s ease, transform .06s ease;
}
.svc-menu.svc-overlay .svc-item:hover{ background:rgba(255,255,255,.10); }
.svc-menu.svc-overlay .svc-item:active{ transform:translateY(1px); }
.svc-menu.svc-overlay .svc-item:focus{ outline:none; background:rgba(255,255,255,.04); }
.svc-menu.svc-overlay .svc-item svg{ width:20px; height:20px; color:#9bb3ea; }
.svc-menu.svc-overlay .svc-item .name{
  flex:1; font-size:17px; line-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Prevent scrolling the page/iframe while overlay is open */
html.svc-open, body.svc-open{ overflow:hidden !important; }

/* --- Title & meta links: white, no underline (Spotify-like) --- */
.title { color: var(--fg); }

.title a,
.title a:link,
.title a:visited,
.meta a,
.meta a:link,
.meta a:visited{
  color: var(--fg);
  text-decoration: none;
}

.title a:hover,
.title a:focus,
.meta a:hover,
.meta a:focus{
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ==== Sleek services sheet: compact + nestled =================== */
/* Put sheet near the top of the embed, not dead-center */
.svc-menu.svc-overlay{
  place-items: start center !important;   /* top-center */
}

/* Panel: smaller margins, slimmer grid, fits the iframe height */
.svc-menu.svc-overlay .svc-panel{
  width: min(480px, calc(100% - 20px));   /* slimmer than before */
  margin: 12px auto;                      /* minimal outer padding */
  padding: 8px 10px 10px;                 /* tighter inner padding */
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 6px;
  max-height: calc(100vh - 24px);         /* never taller than the embed */
  overflow: auto;                         /* scroll inside if truly needed */
}

/* Header text: lighter + tighter */
.svc-menu.svc-overlay .svc-hint{
  font-size: 11px;
  letter-spacing: .03em;
  padding: 2px 4px 6px;
  color: var(--muted);
}

/* Rows: slimmer paddings, smaller icons and label */
.svc-menu.svc-overlay .svc-item{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
}
.svc-menu.svc-overlay .svc-item:hover{
  background: rgba(255,255,255,.09);
}
.svc-menu.svc-overlay .svc-item svg{
  width: 16px; height: 16px;              /* down from 20px */
  color: #9bb3ea;
}
.svc-menu.svc-overlay .svc-item .name{
  font-size: 15px;                        /* down from 17px */
  line-height: 20px;
}

/* Close button: smaller and tucked in */
.svc-menu.svc-overlay .svc-close{
  top: 8px; right: 8px;
  width: 32px; height: 32px;
}

/* Optional: if you want the overlay dimmer a hair */
.svc-menu.svc-overlay{
  background: rgba(8,14,34,.70);          /* was .78 */
}

/* ===== Ultra-sleek services sheet (tighter margins, smaller type) ===== */
.svc-menu.svc-overlay{ place-items:start center !important; }

/* Panel: closer to top, slimmer all around */
.svc-menu.svc-overlay .svc-panel{
  width: min(440px, calc(100% - 16px));
  margin: 8px auto;              /* was 12px */
  padding: 6px 8px 8px;          /* was 8px 10px 10px */
  border-radius: 10px;           /* a bit flatter */
  grid-template-columns: repeat(2, minmax(160px, 1fr)); /* narrower tiles */
  gap: 6px;
  max-height: calc(100vh - 16px);/* reduce vertical chrome */
}

/* Header: smaller + tighter */
.svc-menu.svc-overlay .svc-hint{
  font-size: 10.5px;             /* was 11px */
  padding: 2px 2px 4px;          /* less space */
}

/* Tiles: slimmer padding, smaller icons + text */
.svc-menu.svc-overlay .svc-item{
  padding: 6px 10px;             /* was 10px 12px */
  border-radius: 9px;
}
.svc-menu.svc-overlay .svc-item svg{
  width: 14px; height: 14px;     /* was 16px */
}
.svc-menu.svc-overlay .svc-item .name{
  font-size: 14px;               /* was 15px */
  line-height: 18px;
}

/* Close button: a touch smaller */
.svc-menu.svc-overlay .svc-close{
  top: 6px; right: 6px;
  width: 28px; height: 28px;     /* was 32px */
}

/* Remove the LISTEN ON header completely */
.svc-menu.svc-overlay .svc-panel > .svc-hint{ 
  display:none !important; 
  margin:0 !important; 
  padding:0 !important; 
  height:0 !important; 
}
.svc-menu.svc-overlay .svc-panel{ padding-top:8px; } /* tighten space */