/* JL Planners — Wedding Shopping List Planner.
 * Mobile-first, romantic/premium Polish-wedding styling. Item rows render as cards on
 * small screens and a compact grid on wider ones. Urgency colours: burgundy = po
 * terminie, amber = wkrótce, slate = zaplanowane, green = kupione. Reuses .jlp-btn /
 * .jlp-field / .jlp-input / .jlp-muted / .jlp-eyebrow from planner-shell.css. */

.jlp-wsl {
	--wsl-gold:       var(--jlp-gold);
	--wsl-gold-deep:  var(--jlp-gold-deep);
	--wsl-gold-soft:  var(--jlp-gold-glow);
	--wsl-line:       var(--jlp-line);
	--wsl-ink:        var(--jlp-ink);
	--wsl-ink-soft:   var(--jlp-ink-soft);
	--wsl-ink-mute:   var(--jlp-ink-mute);
	--wsl-cream:      var(--jlp-bg);
	--wsl-blush:      var(--jlp-blush);
	--wsl-done:       var(--jlp-ok);  --wsl-done-bg:     var(--jlp-ok-bg);
	--wsl-soon:       var(--jlp-warn);  --wsl-soon-bg:     var(--jlp-warn-bg);
	--wsl-overdue:    var(--jlp-error);  --wsl-overdue-bg:  var(--jlp-error-bg);
	--wsl-upcoming:   #34607A;  --wsl-upcoming-bg: #EAF1F5;
	font-family: "Manrope", system-ui, sans-serif;
	color: var(--wsl-ink);
}
.jlp-wsl * { box-sizing: border-box; }

.jlp-wsl-h2 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 500;
	margin: 0 0 .6rem;
}
.jlp-wsl section { margin: 0 0 1.8rem; }
.jlp-wsl .jlp-eyebrow {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .72rem;
	color: var(--wsl-gold-deep);
	margin: 0 0 .35rem;
}

/* ---------- locked preview banner + low-friction CTA ---------- */
.jlp-wsl-locked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	background: linear-gradient(120deg, var(--wsl-blush), var(--wsl-cream));
	border: 1px solid var(--wsl-line);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	margin: 0 0 1.6rem;
}
.jlp-wsl-locked__icon { font-size: 1.4rem; line-height: 1; }
.jlp-wsl-locked__body { flex: 1 1 16rem; }
.jlp-wsl-locked__text { margin: 0 0 .55rem; color: var(--wsl-ink-soft); font-size: .95rem; }
.jlp-wsl-locked__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.jlp-wsl-locked .jlp-btn--primary { flex: 0 0 auto; }

/* ---------- onboarding ---------- */
.jlp-wsl-onboarding__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .9rem;
}
@media (min-width: 720px) {
	.jlp-wsl-onboarding__grid { grid-template-columns: minmax(0, 18rem) 1fr; align-items: start; }
}

/* ---------- import box ---------- */
.jlp-wsl-import {
	margin-top: 1.1rem;
	padding: .9rem 1rem;
	border: 1px dashed var(--wsl-line);
	border-radius: 10px;
	background: var(--wsl-gold-soft);
}
.jlp-wsl-import__row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.jlp-wsl-import__row .jlp-input { flex: 1 1 14rem; }
.jlp-wsl-import__status { display: block; margin-top: .4rem; font-size: .85rem; color: var(--wsl-ink-soft); }
.jlp-wsl-import__status.is-error { color: var(--wsl-overdue); }
.jlp-wsl-import__status.is-ok { color: var(--wsl-done); }

/* ---------- summary cards + progress ---------- */
.jlp-wsl-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
}
@media (min-width: 640px) { .jlp-wsl-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.jlp-wsl-card {
	background: var(--jlp-surface);
	border: 1px solid var(--wsl-line);
	border-radius: 10px;
	padding: .7rem .8rem;
}
.jlp-wsl-card__label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--wsl-ink-mute); }
.jlp-wsl-card__value { display: block; font-size: 1.15rem; margin-top: .2rem; color: var(--wsl-ink); }

.jlp-wsl-progress {
	margin-top: .9rem;
	height: 8px;
	border-radius: 999px;
	background: var(--wsl-gold-soft);
	overflow: hidden;
}
.jlp-wsl-progress__fill { height: 100%; background: linear-gradient(90deg, var(--wsl-gold), var(--wsl-gold-deep)); transition: width .25s cubic-bezier(.22,.61,.36,1); }
.jlp-wsl-progress__label { margin: .35rem 0 0; font-size: .85rem; color: var(--wsl-ink-soft); }

.jlp-wsl-nextstep {
	margin-top: 1rem;
	padding: .8rem 1rem;
	border-left: 3px solid var(--wsl-gold);
	background: var(--wsl-cream);
	border-radius: 0 8px 8px 0;
}
.jlp-wsl-nextstep__text { margin: 0; color: var(--wsl-ink-soft); }

/* ---------- toolbar: filters + deadline toggle ---------- */
.jlp-wsl-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	justify-content: space-between;
}
.jlp-wsl-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.jlp-wsl .jlp-btn.is-active { background: var(--wsl-gold-deep); color: #fff; border-color: var(--wsl-gold-deep); }

/* ---------- deadline view ---------- */
.jlp-wsl-deadline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.jlp-wsl-deadline__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "date name badge" "cat cat badge";
	gap: .15rem .6rem;
	align-items: center;
	padding: .55rem .7rem;
	border-radius: 8px;
	border: 1px solid var(--wsl-line);
	background: var(--jlp-surface);
}
@media (min-width: 600px) {
	.jlp-wsl-deadline__row { grid-template-columns: 7.5rem 1fr auto auto; grid-template-areas: "date name cat badge"; }
}
.jlp-wsl-deadline__date { grid-area: date; font-variant-numeric: tabular-nums; color: var(--wsl-ink-soft); font-size: .9rem; }
.jlp-wsl-deadline__name { grid-area: name; }
.jlp-wsl-deadline__cat  { grid-area: cat; font-size: .8rem; color: var(--wsl-ink-mute); }
.jlp-wsl-deadline__row--overdue  { border-color: var(--wsl-overdue);  background: var(--wsl-overdue-bg); }
.jlp-wsl-deadline__row--soon     { border-color: var(--wsl-soon);     background: var(--wsl-soon-bg); }
.jlp-wsl-deadline__row--done     { border-color: var(--wsl-done);     background: var(--wsl-done-bg); }
.jlp-wsl-deadline__row--done .jlp-wsl-deadline__name { text-decoration: line-through; color: var(--wsl-ink-mute); }

.jlp-wsl-badge {
	grid-area: badge;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .15rem .5rem;
	border-radius: 999px;
	white-space: nowrap;
}
.jlp-wsl-badge--overdue  { background: var(--wsl-overdue);  color: #fff; }
.jlp-wsl-badge--soon     { background: var(--wsl-soon);     color: #fff; }
.jlp-wsl-badge--upcoming { background: var(--wsl-upcoming); color: #fff; }
.jlp-wsl-badge--done     { background: var(--wsl-done);     color: #fff; }

/* ---------- items list ---------- */
.jlp-wsl-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.jlp-wsl-items__hint { font-size: .85rem; margin: .2rem 0 .9rem; }
.jlp-wsl-empty { padding: 1.1rem; border: 1px dashed var(--wsl-line); border-radius: 10px; text-align: center; background: var(--wsl-cream); }
.jlp-wsl-rows { display: flex; flex-direction: column; gap: .7rem; }

.jlp-wsl-item {
	border: 1px solid var(--wsl-line);
	border-radius: 12px;
	background: var(--jlp-surface);
	padding: .8rem .9rem;
}
.jlp-wsl-item[data-bought="1"] { background: var(--wsl-done-bg); border-color: var(--jlp-ok-line); }
.jlp-wsl-item.is-hidden { display: none; }

.jlp-wsl-item__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.jlp-wsl-check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .9rem; }
.jlp-wsl-check__box { width: 1.35rem; height: 1.35rem; accent-color: var(--wsl-gold-deep); cursor: pointer; }
.jlp-wsl-check__label { color: var(--wsl-ink-soft); }
.jlp-wsl-chip {
	font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
	padding: .12rem .45rem; border-radius: 999px;
	background: var(--wsl-gold-soft); color: var(--wsl-gold-deep);
}
.jlp-wsl-del {
	margin-left: auto;
	width: 1.9rem; height: 1.9rem;
	border-radius: 999px;
	border: 1px solid var(--wsl-line);
	background: var(--jlp-surface); color: var(--wsl-ink-soft);
	font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.jlp-wsl-del:hover { background: var(--wsl-overdue-bg); color: var(--wsl-overdue); border-color: var(--wsl-overdue); }

.jlp-wsl-item__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .6rem;
}
@media (min-width: 600px) {
	.jlp-wsl-item__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jlp-wsl-cell--name,
	.jlp-wsl-cell--store,
	.jlp-wsl-cell--notes { grid-column: 1 / -1; }
}
@media (min-width: 880px) {
	.jlp-wsl-item__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jlp-wsl-cell--name  { grid-column: span 3; }
	.jlp-wsl-cell--cat   { grid-column: span 1; }
	.jlp-wsl-cell--qty   { grid-column: span 1; }
	.jlp-wsl-cell--est   { grid-column: span 1; }
	.jlp-wsl-cell--act   { grid-column: span 1; }
	.jlp-wsl-cell--total { grid-column: span 1; }
	.jlp-wsl-cell--store { grid-column: span 2; }
	.jlp-wsl-cell--status{ grid-column: span 1; }
	.jlp-wsl-cell--date  { grid-column: span 1; }
	.jlp-wsl-cell--notes { grid-column: 1 / -1; }
}
.jlp-wsl-line-total { color: var(--wsl-gold-deep); }
.jlp-wsl-num { font-variant-numeric: tabular-nums; }
.jlp-wsl .jlp-field__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wsl-ink-mute); }
.jlp-wsl textarea.jlp-input { resize: vertical; min-height: 2.2rem; }

.jlp-wsl-foot {
	display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
	margin-top: .9rem; padding-top: .7rem;
	border-top: 1px solid var(--wsl-line);
	font-size: .9rem; color: var(--wsl-ink-soft);
}
.jlp-wsl-foot strong { color: var(--wsl-ink); }

/* ---------- read-only ---------- */
.jlp-wsl[data-readonly="1"] .jlp-wsl-del,
.jlp-wsl[data-readonly="1"] [data-wsl-add],
.jlp-wsl[data-readonly="1"] [data-wsl-import] { display: none; }