/* JL Planners — Music Planner ("Muzyka weselna")
   Mobile-first, romantic/premium Polish-wedding styling. Scoped under .jlp-mp.
   Reuses the foundation tokens from planner-shell.css (--jlp-*). */

.jlp-mp { display: flex; flex-direction: column; gap: 28px; font-family: var(--jlp-ff-body, system-ui, sans-serif); }
.jlp-mp .jlp-mp-h2 {
	font-family: var(--jlp-ff-display, Georgia, serif);
	font-weight: 500;
	font-size: clamp(1.35rem, 4vw, 1.8rem);
	line-height: 1.15;
	margin: 0 0 4px;
	color: var(--jlp-ink, #2A1F1A);
}
.jlp-mp .jlp-mp-hint { color: var(--jlp-ink-mute, #9A8A7E); font-size: .9rem; margin: 0 0 12px; }
.jlp-mp section { margin: 0; }

/* --- locked / preview banner --- */
.jlp-mp-locked {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: linear-gradient(135deg, var(--jlp-blush, #FCEDED), var(--jlp-cream, #F4ECDF));
	border: 1px solid var(--jlp-line-strong, rgba(140,111,63,.4));
	border-radius: var(--jlp-radius-lg, 10px);
	padding: 14px 16px;
}
.jlp-mp-locked__icon { display: inline-flex; flex: 0 0 auto; color: var(--jlp-gold-deep); line-height: 1; }
.jlp-mp-locked__text { flex: 1 1 240px; color: var(--jlp-ink-soft, #6B5C53); font-size: .95rem; }

/* --- onboarding --- */
.jlp-mp-onboarding__grid {
	display: grid; gap: 14px;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .jlp-mp-onboarding__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .jlp-mp-onboarding__grid { grid-template-columns: repeat(3, 1fr); } }
.jlp-mp-onboarding__instructions { margin-top: 14px; }

/* --- vibe tags --- */
.jlp-mp-vibes__head { display: flex; flex-direction: column; }
.jlp-mp-vibes__rows { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.jlp-mp-vibe { display: inline-flex; align-items: center; gap: 4px; background: var(--jlp-surface, #fff); border: 1px solid var(--jlp-line, rgba(184,152,104,.22)); border-radius: 999px; padding: 2px 4px 2px 10px; }
.jlp-mp-vibe__tag { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 4px 2px !important; min-width: 7ch; max-width: 22ch; font-size: .9rem; }
.jlp-mp-vibe__tag:focus { outline: 2px solid var(--jlp-gold, #B89968); outline-offset: 1px; border-radius: 4px; }
.jlp-mp-vibe__del, .jlp-mp-row__del, .jlp-mp-req__del {
	border: 0; background: transparent; cursor: pointer; color: var(--jlp-ink-mute, #9A8A7E);
	font-size: 1.1rem; line-height: 1; padding: 4px 8px; border-radius: 999px;
}
.jlp-mp-vibe__del:hover, .jlp-mp-row__del:hover, .jlp-mp-req__del:hover { background: var(--jlp-blush, #FCEDED); color: var(--jlp-error, #b3261e); }
.jlp-mp-vibes__add { margin-top: 2px; }
.jlp-mp-vibes__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.jlp-mp-vibes__presets-label { font-size: .8rem; color: var(--jlp-ink-mute, #9A8A7E); margin-right: 2px; }
.jlp-chip {
	border: 1px dashed var(--jlp-line-strong, rgba(140,111,63,.4)); background: transparent;
	color: var(--jlp-gold-deep, #8C6F3F); border-radius: 999px; padding: 4px 12px; font-size: .82rem;
	cursor: pointer; font-family: inherit; transition: background-color .2s, color .2s;
}
.jlp-chip:hover { background: var(--jlp-cream, #F4ECDF); }
.jlp-chip[disabled] { opacity: .4; cursor: default; }

/* --- next step / warnings --- */
.jlp-mp-nextstep { background: var(--jlp-surface, #fff); border: 1px solid var(--jlp-line, rgba(184,152,104,.22)); border-radius: var(--jlp-radius-lg, 10px); padding: 16px 18px; box-shadow: var(--jlp-shadow-sm, 0 8px 24px -16px rgba(42,31,26,.18)); }
.jlp-mp-nextstep__progress { font-size: .9rem; color: var(--jlp-ink-soft, #6B5C53); margin: 4px 0 12px; }
.jlp-mp-nextstep__warnings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.jlp-mp-nextstep__warnings .jlp-notice { margin: 0; }
@media (min-width: 1024px) {
	.jlp-mp-nextstep { position: sticky; top: 16px; z-index: 2; }
}

/* --- set-list preview --- */
.jlp-mp-preview__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .jlp-mp-preview__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .jlp-mp-preview__grid { grid-template-columns: repeat(3, 1fr); } }
.jlp-mp-card {
	background: var(--jlp-surface, #fff);
	border: 1px solid var(--jlp-line, rgba(184,152,104,.22));
	border-radius: var(--jlp-radius-lg, 10px);
	padding: 14px 16px;
	box-shadow: var(--jlp-shadow-sm, 0 8px 24px -16px rgba(42,31,26,.18));
}
.jlp-mp-card--must { border-color: var(--jlp-gold, #B89968); background: linear-gradient(180deg, var(--jlp-bg), var(--jlp-surface, #fff)); grid-column: 1 / -1; }
.jlp-mp-card--avoid { border-color: #C0392B; background: linear-gradient(180deg, #FDECEA, var(--jlp-surface, #fff)); grid-column: 1 / -1; }
.jlp-mp-card__title { font-family: var(--jlp-ff-display, Georgia, serif); font-weight: 500; font-size: 1.2rem; margin: 0 0 8px; }
.jlp-mp-card--must .jlp-mp-card__title { color: var(--jlp-gold-deep, #8C6F3F); }
.jlp-mp-card--avoid .jlp-mp-card__title { color: #C0392B; }
.jlp-mp-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.jlp-mp-card__item { font-size: .95rem; padding: 5px 0; border-bottom: 1px dotted var(--jlp-line, rgba(184,152,104,.22)); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.jlp-mp-card__item:last-child { border-bottom: 0; }
.jlp-mp-card__item.is-must { font-weight: 600; }
.jlp-mp-card__item.is-avoid .jlp-mp-card__song { color: #C0392B; }
.jlp-mp-card__song { }
.jlp-mp-card__when, .jlp-mp-card__note { font-size: .8rem; color: var(--jlp-ink-mute, #9A8A7E); width: 100%; }
.jlp-mp-card__when { width: auto; }
.jlp-mp-card__link { font-size: .9rem; text-decoration: none; }
.jlp-mp-badge--must {
	display: inline-block; background: var(--jlp-gold, #B89968); color: #fff; border-radius: 2px;
	padding: 1px 7px; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em;
}
.jlp-mp-preview__empty { grid-column: 1 / -1; }

/* --- editable song list --- */
.jlp-mp-songlist__head { display: flex; flex-direction: column; }
.jlp-mp-songlist__empty, .jlp-mp-requests__empty { margin: 8px 0 14px; }
.jlp-mp-songlist__cols { display: none; }
.jlp-mp-rows__list, .jlp-mp-reqs__list { display: flex; flex-direction: column; gap: 12px; }

/* mobile: each row is a stacked card */
.jlp-mp-row {
	display: grid; gap: 8px; grid-template-columns: 1fr;
	background: var(--jlp-surface, #fff);
	border: 1px solid var(--jlp-line, rgba(184,152,104,.22));
	border-radius: var(--jlp-radius-lg, 10px);
	padding: 12px;
}
.jlp-mp-row--must { border-left: 4px solid var(--jlp-gold, #B89968); }
.jlp-mp-row--avoid { border-left: 4px solid #C0392B; }
.jlp-mp-row__drag { display: none; cursor: grab; color: var(--jlp-ink-mute, #9A8A7E); user-select: none; align-self: center; font-size: 1.1rem; }
.jlp-mp-row__notes { resize: vertical; }
.jlp-mp-row .jlp-mp-row__del { justify-self: end; }

.jlp-mp-songlist__add, .jlp-mp-requests__add, .jlp-mp-vibes__add { align-self: flex-start; margin-top: 12px; }

/* desktop: row becomes a single grid line */
@media (min-width: 980px) {
	.jlp-mp-songlist__cols {
		display: grid;
		grid-template-columns: 24px minmax(120px, 1.1fr) minmax(140px, 1.4fr) 150px 130px 130px minmax(140px, 1.3fr) 36px;
		gap: 8px; padding: 0 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--jlp-ink-mute, #9A8A7E);
	}
	.jlp-mp-songlist__cols span:first-child { visibility: hidden; }
	.jlp-mp-row {
		grid-template-columns: 24px minmax(120px, 1.1fr) minmax(140px, 1.4fr) 150px 130px 130px minmax(140px, 1.3fr) 36px;
		align-items: center; padding: 8px 12px;
	}
	.jlp-mp-row__drag { display: inline-block; }
	.jlp-mp-row__notes { rows: 1; min-height: 38px; }
}

/* --- guest requests --- */
.jlp-mp-requests__head { display: flex; flex-direction: column; }
.jlp-mp-req {
	display: grid; gap: 8px; grid-template-columns: 1fr;
	background: var(--jlp-surface, #fff);
	border: 1px solid var(--jlp-line, rgba(184,152,104,.22));
	border-radius: var(--jlp-radius-lg, 10px);
	padding: 12px;
}
.jlp-mp-req--zaakceptowana { border-left: 4px solid var(--jlp-ok, #2e7d32); }
.jlp-mp-req--odrzucona { border-left: 4px solid var(--jlp-ink-mute, #9A8A7E); }
.jlp-mp-req--odrzucona .jlp-mp-req__title, .jlp-mp-req--odrzucona .jlp-mp-req__artist { text-decoration: line-through; color: var(--jlp-ink-mute, #9A8A7E); }
.jlp-mp-req .jlp-mp-req__del { justify-self: end; }
@media (min-width: 980px) {
	.jlp-mp-req {
		grid-template-columns: minmax(110px, 1fr) minmax(120px, 1fr) minmax(120px, 1.3fr) minmax(140px, 1.4fr) 150px 36px;
		align-items: center; padding: 8px 12px;
	}
}

/* --- general notes --- */
.jlp-mp-notes textarea { resize: vertical; }

/* --- buttons --- */
.jlp-btn--sm { padding: 7px 14px; font-size: .82rem; }

/* --- read-only / preview lockdown --- */
.jlp-mp[data-readonly="1"] [data-mp-drag],
.jlp-mp[data-readonly="1"] .jlp-mp-row__del,
.jlp-mp[data-readonly="1"] .jlp-mp-req__del,
.jlp-mp[data-readonly="1"] .jlp-mp-vibe__del,
.jlp-mp[data-readonly="1"] .jlp-mp-songlist__add,
.jlp-mp[data-readonly="1"] .jlp-mp-requests__add,
.jlp-mp[data-readonly="1"] .jlp-mp-vibes__add,
.jlp-mp[data-readonly="1"] .jlp-mp-vibes__presets { display: none !important; }

/* inside the watermarked preview wrapper, keep things legible */
.jlp-preview-wrap .jlp-mp { opacity: .98; }