/* JL Planners — Supplier Comparison Planner ("Porównywarka dostawców").
 * Mobile-first, romantic/premium Polish-wedding style. Everything is scoped under
 * .jlp-scp and relies on the --jlp-* design tokens from planner-shell.css. */

.jlp-scp { display: flex; flex-direction: column; gap: clamp( 22px, 4vw, 36px ); }
.jlp-scp .jlp-scp-h2 {
	font-family: var( --jlp-ff-display );
	font-weight: 500;
	font-size: clamp( 1.4rem, 3vw, 1.9rem );
	margin: 0 0 14px;
	line-height: 1.15;
}
.jlp-scp .jlp-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var( --jlp-gold-deep ); margin: 0 0 6px; }
.jlp-scp .jlp-muted { color: var( --jlp-ink-mute ); }
.jlp-scp .jlp-field { display: block; margin-bottom: 12px; }
.jlp-scp .jlp-field__label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; color: var( --jlp-ink-soft ); margin-bottom: 5px; }
.jlp-scp .jlp-input { width: 100%; }
.jlp-scp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect( 1px, 1px, 1px, 1px ); white-space: nowrap; }

/* ---------- locked / preview banner ---------- */
.jlp-scp-locked {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	padding: 14px 16px;
	background: linear-gradient( 100deg, var( --jlp-blush ), var( --jlp-cream ) );
	border: 1px solid var( --jlp-line-strong );
	border-radius: var( --jlp-radius-lg );
}
.jlp-scp-locked__icon { display: inline-flex; line-height: 0; color: var( --jlp-gold-deep ); }
.jlp-scp-locked__icon svg { width: 1.2rem; height: 1.2rem; }
.jlp-scp-locked__text { flex: 1 1 240px; font-size: 0.92rem; color: var( --jlp-ink-soft ); }
.jlp-scp-locked__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.jlp-btn--sm { padding: 7px 12px; font-size: 0.82rem; }

/* ---------- onboarding ---------- */
.jlp-scp-onboarding__grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media ( min-width: 560px ) { .jlp-scp-onboarding__grid { grid-template-columns: 2fr 1fr; } }
.jlp-scp-onboarding__notes { margin-top: 4px; }

/* ---------- weighted scoring model ---------- */
.jlp-scp-weights__hint { font-size: 0.86rem; margin: 0 0 14px; max-width: 70ch; }
.jlp-scp-weights__grid {
	display: grid; grid-template-columns: 1fr; gap: 12px 22px;
	padding: 16px;
	background: var( --jlp-cream );
	border: 1px solid var( --jlp-line );
	border-radius: var( --jlp-radius-lg );
}
@media ( min-width: 560px ) { .jlp-scp-weights__grid { grid-template-columns: 1fr 1fr; } }
@media ( min-width: 900px ) { .jlp-scp-weights__grid { grid-template-columns: 1fr 1fr 1fr; } }
.jlp-scp-weight { display: flex; flex-direction: column; gap: 4px; }
.jlp-scp-weight__label { font-size: 0.82rem; font-weight: 600; color: var( --jlp-ink-soft ); display: flex; align-items: center; gap: 6px; }
.jlp-scp-weight__auto { font-style: italic; font-weight: 400; font-size: 0.7rem; color: var( --jlp-gold-deep ); background: var( --jlp-gold-glow ); padding: 1px 6px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; }
.jlp-scp-weight__row { display: flex; align-items: center; gap: 10px; }
.jlp-scp-range { flex: 1 1 auto; accent-color: var( --jlp-gold ); height: 22px; }
.jlp-scp-weight__val { min-width: 1.8em; text-align: center; font-family: var( --jlp-ff-display ); font-size: 1.15rem; color: var( --jlp-gold-deep ); font-weight: 600; }
.jlp-scp-weight.is-auto .jlp-scp-range { accent-color: var( --jlp-rose-deep ); }

/* ---------- summary ---------- */
.jlp-scp-cards { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 10px; }
@media ( min-width: 640px ) { .jlp-scp-cards { grid-template-columns: repeat( 5, 1fr ); } }
.jlp-scp-card {
	background: var( --jlp-surface );
	border: 1px solid var( --jlp-line );
	border-radius: var( --jlp-radius );
	padding: 12px 14px;
	display: flex; flex-direction: column; gap: 4px;
}
.jlp-scp-card__label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var( --jlp-ink-mute ); }
.jlp-scp-card__value { font-family: var( --jlp-ff-display ); font-size: 1.45rem; color: var( --jlp-ink ); line-height: 1.1; }
.jlp-scp-nextstep {
	margin-top: 14px; padding: 12px 16px;
	background: linear-gradient( 100deg, rgba( 232, 197, 197, 0.22 ), rgba( 244, 236, 223, 0.5 ) );
	border-left: 3px solid var( --jlp-gold );
	border-radius: var( --jlp-radius );
}
.jlp-scp-nextstep__text { margin: 4px 0 0; font-size: 0.96rem; color: var( --jlp-ink-soft ); }

/* ---------- suppliers section ---------- */
.jlp-scp-section-head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.jlp-scp-section-head .jlp-scp-h2 { margin: 0; }
.jlp-scp-section-head__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jlp-scp-filter select { min-width: 200px; }
.jlp-scp-empty { padding: 18px; text-align: center; border: 1px dashed var( --jlp-line-strong ); border-radius: var( --jlp-radius ); background: var( --jlp-cream ); }
.jlp-scp-empty p { margin: 0; }

.jlp-scp-suppliers__list { display: flex; flex-direction: column; gap: 16px; }

/* ---------- supplier card ---------- */
.jlp-scp-supplier {
	position: relative;
	background: var( --jlp-surface );
	border: 1px solid var( --jlp-line );
	border-radius: var( --jlp-radius-lg );
	box-shadow: var( --jlp-shadow-sm );
	padding: 14px clamp( 14px, 2.4vw, 22px ) 16px;
	display: flex; flex-direction: column; gap: 12px;
	transition: box-shadow 0.25s var( --jlp-ease ), border-color 0.25s var( --jlp-ease );
}
.jlp-scp-supplier.is-best { border-color: var( --jlp-gold ); box-shadow: 0 14px 34px -22px rgba( 184, 152, 104, 0.55 ); }
.jlp-scp-supplier.is-best::before {
	content: ""; position: absolute; inset: 0; border-radius: var( --jlp-radius-lg );
	background: linear-gradient( 180deg, rgba( 229, 212, 177, 0.28 ), rgba( 255, 255, 255, 0 ) 60% );
	pointer-events: none;
}
.jlp-scp-supplier.is-winner:not(.is-best) { border-color: var( --jlp-rose-deep ); }
.jlp-scp-supplier > * { position: relative; }

.jlp-scp-supplier__head { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
@media ( min-width: 620px ) { .jlp-scp-supplier__head { grid-template-columns: minmax( 150px, 0.8fr ) 1.6fr auto auto; align-items: center; } }
.jlp-scp-supplier__cat, .jlp-scp-supplier__name { margin: 0; }
.jlp-scp-name { font-family: var( --jlp-ff-display ); font-size: 1.1rem; }
.jlp-scp-supplier__badge {
	align-self: center; white-space: nowrap;
	font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
	color: var( --jlp-gold-deep ); background: var( --jlp-gold-glow );
	padding: 3px 9px; border-radius: 999px;
}
.jlp-scp-supplier.is-winner:not(.is-best) .jlp-scp-supplier__badge { color: var( --jlp-rose-deep ); background: rgba( 201, 154, 154, 0.2 ); }
.jlp-scp-del {
	justify-self: end;
	width: 30px; height: 30px; line-height: 28px; text-align: center;
	border: 1px solid var( --jlp-line-strong ); background: var( --jlp-surface ); color: var( --jlp-ink-soft );
	border-radius: 999px; cursor: pointer; font-size: 1.1rem;
	transition: background-color 0.2s var( --jlp-ease ), color 0.2s var( --jlp-ease );
}
.jlp-scp-del:hover { background: var( --jlp-blush ); color: var( --jlp-error ); }

.jlp-scp-supplier__grid { display: grid; grid-template-columns: 1fr; gap: 10px clamp( 14px, 2.4vw, 26px ); }
@media ( min-width: 720px ) { .jlp-scp-supplier__grid { grid-template-columns: 1fr 1fr; } }
@media ( min-width: 1040px ) { .jlp-scp-supplier__grid { grid-template-columns: 1fr 1fr 1fr; } }
.jlp-scp-col { display: flex; flex-direction: column; }
.jlp-scp-field--full { grid-column: 1 / -1; }

.jlp-scp-field--withaction .jlp-scp-inputrow { display: flex; gap: 6px; align-items: stretch; }
.jlp-scp-field--withaction .jlp-scp-inputrow .jlp-input { flex: 1 1 auto; }
.jlp-scp-action {
	flex: 0 0 auto; display: inline-flex; align-items: center;
	padding: 0 10px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
	background: var( --jlp-cream ); color: var( --jlp-gold-deep ); border: 1px solid var( --jlp-line-strong );
	border-radius: var( --jlp-radius ); text-decoration: none;
}
.jlp-scp-action:hover { background: var( --jlp-champagne ); }

.jlp-scp-money3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.jlp-scp-money3 .jlp-field { margin-bottom: 8px; }
.jlp-scp-num { text-align: right; }
.jlp-scp-totalcost { margin: 0 0 10px; font-size: 0.9rem; color: var( --jlp-ink-soft ); }
.jlp-scp-totalcost strong { font-family: var( --jlp-ff-display ); font-size: 1.05rem; color: var( --jlp-ink ); }

.jlp-scp-ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.jlp-scp-rating { margin-bottom: 6px; }
.jlp-scp-rating .jlp-field__label { font-size: 0.72rem; }
.jlp-scp-scoreinput { width: 100%; text-align: center; }

.jlp-scp-score {
	margin-top: 6px; padding: 10px 12px;
	background: var( --jlp-cream ); border: 1px solid var( --jlp-line ); border-radius: var( --jlp-radius );
}
.jlp-scp-score__total { margin: 0 0 6px; font-size: 0.86rem; color: var( --jlp-ink-soft ); }
.jlp-scp-score__total strong { font-family: var( --jlp-ff-display ); font-size: 1.6rem; color: var( --jlp-gold-deep ); line-height: 1; }
.jlp-scp-score__max { font-size: 0.8rem; color: var( --jlp-ink-mute ); }
.jlp-scp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.jlp-scp-chip {
	display: inline-flex; align-items: baseline; gap: 5px;
	font-size: 0.7rem; padding: 2px 7px; border-radius: 999px;
	background: var( --jlp-surface ); border: 1px solid var( --jlp-line ); color: var( --jlp-ink-soft );
}
.jlp-scp-chip.is-auto { border-style: dashed; }
.jlp-scp-chip__k { letter-spacing: 0.02em; }
.jlp-scp-chip__v { font-weight: 700; color: var( --jlp-ink ); }

.jlp-scp-supplier__notes { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media ( min-width: 720px ) { .jlp-scp-supplier__notes { grid-template-columns: 1fr 1fr; } }

.jlp-scp-supplier__foot { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; border-top: 1px solid var( --jlp-line ); padding-top: 10px; }
.jlp-scp-winner { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var( --jlp-ink-soft ); cursor: pointer; }
.jlp-scp-winner input { accent-color: var( --jlp-gold ); width: 16px; height: 16px; }

/* ---------- "send to Vendor Planner" picker ---------- */
.jlp-scp-picker { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 18px; }
.jlp-scp-picker[hidden] { display: none; }
.jlp-scp-picker__backdrop { position: absolute; inset: 0; background: rgba( 42, 31, 26, 0.45 ); }
.jlp-scp-picker__panel {
	position: relative; z-index: 1; width: min( 460px, 100% );
	background: var( --jlp-surface ); border-radius: var( --jlp-radius-lg ); box-shadow: var( --jlp-shadow );
	padding: 22px clamp( 18px, 4vw, 28px );
}
.jlp-scp-picker__close { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; font-size: 1.5rem; line-height: 1; color: var( --jlp-ink-mute ); cursor: pointer; }
.jlp-scp-picker__title { font-family: var( --jlp-ff-display ); font-weight: 500; font-size: 1.3rem; margin: 0 0 8px; }
.jlp-scp-picker__supplier { font-size: 0.92rem; color: var( --jlp-ink-soft ); margin: 0 0 14px; }
.jlp-scp-picker__supplier strong { color: var( --jlp-ink ); }
.jlp-scp-picker__empty { font-size: 0.9rem; color: var( --jlp-ink-mute ); margin: 0 0 12px; }
.jlp-scp-picker__error { font-size: 0.88rem; color: var( --jlp-error ); margin: 0 0 12px; }
.jlp-scp-picker__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- public landing ---------- */
.jlp-scp-public { display: flex; flex-direction: column; gap: 16px; }
.jlp-scp-public__perks { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: var( --jlp-ink-soft ); }
.jlp-scp-public__cols { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media ( min-width: 600px ) { .jlp-scp-public__cols { grid-template-columns: 1fr 1fr; } }
.jlp-scp-public__categories ul, .jlp-scp-public__weights ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var( --jlp-ink-soft ); font-size: 0.94rem; }
.jlp-scp-public__weights li { display: flex; align-items: baseline; gap: 8px; }
.jlp-scp-public__weights li em { color: var( --jlp-ink-mute ); font-size: 0.8rem; }
.jlp-scp-public__w { display: inline-flex; min-width: 1.6em; justify-content: center; font-weight: 700; color: #fff; background: var( --jlp-gold ); border-radius: 3px; padding: 0 5px; font-size: 0.8rem; }
.jlp-scp-public__cta { font-size: 0.96rem; color: var( --jlp-ink-soft ); }

/* ---------- read-only (export render / preview lock) ---------- */
.jlp-scp[data-readonly="1"] .jlp-scp-del,
.jlp-scp[data-readonly="1"] .jlp-scp-section-head__tools button,
.jlp-scp[data-readonly="1"] .jlp-scp-supplier__foot button { display: none; }