/* JL Planners — Vows Planner ("Przysięgi ślubne")
   Mobile-first, romantic / premium Polish-wedding styling. Everything is scoped under
   .jlp-vows (editor) and .jlp-vows-public (marketing). Reuses the foundation tokens
   from planner-shell.css (--jlp-*). */

/* ---------------- shared helpers ---------------- */
.jlp-vows,
.jlp-vows-public {
	--vw-paper: var(--jlp-surface, #fffdfa);
	--vw-cream: var(--jlp-cream, #fbf6ee);
	--vw-line: var(--jlp-line, rgba(184, 152, 104, .24));
	--vw-line-strong: var(--jlp-line-strong, rgba(184, 152, 104, .42));
	--vw-gold: var(--jlp-gold, #b89968);
	--vw-gold-deep: var(--jlp-gold-deep, #8c6f3f);
	--vw-ink: var(--jlp-ink, #2a1f1a);
	--vw-ink-soft: var(--jlp-ink-soft, #5d4f45);
	--vw-ink-mute: var(--jlp-ink-mute, #9a8a7e);
	--vw-ok: var(--jlp-ok, #4f7a52);
	--vw-warn: var(--jlp-warn, #b9772e);
	--vw-error: var(--jlp-error, #c0392b);
	--vw-radius: var(--jlp-radius-lg, 12px);
	--vw-ff-body: var(--jlp-ff-body, "Manrope", system-ui, sans-serif);
	--vw-ff-display: var(--jlp-ff-display, "Cormorant Garamond", Georgia, serif);
}

.jlp-vows {
	display: flex;
	flex-direction: column;
	gap: 26px;
	font-family: var(--vw-ff-body);
	color: var(--vw-ink);
}

.jlp-vows .jlp-vows-h2 {
	font-family: var(--vw-ff-display);
	font-weight: 500;
	font-size: 1.6rem;
	margin: 0 0 4px;
	color: var(--vw-ink);
}

.jlp-vows .jlp-vows-hint,
.jlp-vows .jlp-muted {
	font-size: .92rem;
	color: var(--vw-ink-mute);
	margin: 6px 0 0;
	line-height: 1.55;
}

.jlp-vows .jlp-btn--xs {
	font-size: .78rem;
	padding: 5px 10px;
	border-radius: 999px;
}

/* ---------------- privacy + locked banners ---------------- */
.jlp-vows-privacy {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	background: var(--vw-cream);
	border: 1px solid var(--vw-line);
	border-radius: var(--vw-radius);
	font-size: .9rem;
	color: var(--vw-ink-soft);
}
.jlp-vows-privacy__icon { font-size: 1rem; line-height: 1.4; }

.jlp-vows-locked {
	border: 1px solid var(--vw-gold);
	background: linear-gradient(180deg, #fffdf8, #fbf3e6);
	border-radius: var(--vw-radius);
	padding: 18px 20px;
	box-shadow: var(--jlp-shadow-sm, 0 8px 24px -18px rgba(42, 31, 26, .35));
}
.jlp-vows-locked__text {
	margin: 0 0 12px;
	font-size: .96rem;
	line-height: 1.6;
	color: var(--vw-ink-soft);
}
.jlp-vows-locked__icon { margin-right: 4px; }
.jlp-vows-locked__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* ---------------- couple block ---------------- */
.jlp-vows-couple__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 12px;
}
@media (min-width: 640px) {
	.jlp-vows-couple__grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------------- versions ---------------- */
.jlp-vows-versions-wrap { display: flex; flex-direction: column; gap: 12px; }
.jlp-vows-versions__head { display: flex; flex-direction: column; gap: 2px; }

.jlp-vows-versions {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.jlp-vows-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jlp-vows-tab {
	font-family: var(--vw-ff-body);
	font-size: .88rem;
	padding: 8px 14px;
	border: 1px solid var(--vw-line-strong);
	background: var(--vw-paper);
	color: var(--vw-ink-soft);
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s var(--jlp-ease, ease), color .18s, border-color .18s;
	max-width: 100%;
}
.jlp-vows-tab__name {
	display: inline-block;
	max-width: 14rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}
.jlp-vows-tab:hover { border-color: var(--vw-gold); color: var(--vw-ink); }
.jlp-vows-tab.is-active {
	background: var(--vw-gold);
	border-color: var(--vw-gold-deep);
	color: #fff;
}

.jlp-vows-add-version { align-self: flex-start; }

/* ---------------- one version ---------------- */
.jlp-vows-version {
	border: 1px solid var(--vw-line);
	border-radius: var(--vw-radius);
	background: var(--vw-paper);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
@media (min-width: 720px) { .jlp-vows-version { padding: 24px; } }

.jlp-vows-version__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--vw-line);
}
.jlp-vows-version__titlewrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 14rem;
}
.jlp-vows-version__titlelabel {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--vw-ink-mute);
}
.jlp-vows-version__title {
	font-family: var(--vw-ff-display);
	font-size: 1.25rem;
}
.jlp-vows-version__date {
	font-size: .8rem;
	color: var(--vw-ink-mute);
}
.jlp-vows-version__del {
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--vw-line-strong);
	color: var(--vw-error);
	font-size: .8rem;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
}
.jlp-vows-version__del:hover { background: rgba(192, 57, 43, .08); }

/* ---------------- step rail + progress ---------------- */
.jlp-vows-rail { display: flex; flex-direction: column; gap: 10px; }
.jlp-vows-rail ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.jlp-vows-rail__step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	background: var(--vw-cream);
	border: 1px solid var(--vw-line);
	color: var(--vw-ink-soft);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: .82rem;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.jlp-vows-rail__step:hover { border-color: var(--vw-gold); }
.jlp-vows-rail__step.is-current {
	background: var(--vw-gold);
	border-color: var(--vw-gold-deep);
	color: #fff;
}
.jlp-vows-rail__step.is-done .jlp-vows-rail__num::after {
	content: "";
	width: 0.82em;
	height: 0.82em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jlp-vows-rail__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .07);
	font-size: .72rem;
	font-weight: 600;
}
.jlp-vows-rail__step.is-current .jlp-vows-rail__num { background: rgba(255, 255, 255, .28); }

.jlp-vows-progress { display: flex; flex-direction: column; gap: 4px; }
.jlp-vows-progress__bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--vw-line);
	overflow: hidden;
}
.jlp-vows-progress__bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--vw-gold), var(--vw-gold-deep));
	transition: width .25s var(--jlp-ease, ease);
}
.jlp-vows-progress__txt { font-size: .78rem; color: var(--vw-ink-mute); }

/* ---------------- step panels ---------------- */
.jlp-vows-step { display: flex; flex-direction: column; gap: 10px; }
.jlp-vows-step[hidden] { display: none; }
.jlp-vows-step__title {
	font-family: var(--vw-ff-display);
	font-weight: 500;
	font-size: 1.3rem;
	margin: 0;
}
.jlp-vows-tone-hint {
	font-size: .9rem;
	color: var(--vw-gold-deep);
	background: var(--vw-cream);
	border-left: 3px solid var(--vw-gold);
	padding: 8px 12px;
	border-radius: 0 8px 8px 0;
	margin: 4px 0 0;
}

.jlp-vows-textarea,
.jlp-vows .jlp-vows-private textarea,
.jlp-vows .jlp-vows-general textarea {
	font-family: var(--vw-ff-body);
	line-height: 1.6;
	resize: vertical;
	min-height: 130px;
}

/* ---------------- prompt cards ---------------- */
.jlp-vows-prompts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding-top: 4px;
}
.jlp-vows-prompts__label {
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--vw-ink-mute);
	width: 100%;
}
.jlp-vows-prompt {
	font-family: var(--vw-ff-body);
	font-size: .82rem;
	text-align: left;
	background: var(--jlp-surface);
	border: 1px dashed var(--vw-line-strong);
	color: var(--vw-ink-soft);
	border-radius: 10px;
	padding: 7px 11px;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.jlp-vows-prompt:hover {
	background: var(--vw-cream);
	border-style: solid;
	border-color: var(--vw-gold);
	color: var(--vw-ink);
	transform: translateY(-1px);
}
.jlp-vows-prompt::before { content: "+ "; color: var(--vw-gold-deep); font-weight: 700; }

/* ---------------- wizard nav ---------------- */
.jlp-vows-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding-top: 10px;
	margin-top: 4px;
	border-top: 1px dotted var(--vw-line);
}
.jlp-vows-nav > span { flex: 0 0 auto; }

/* ---------------- writing canvas ---------------- */
.jlp-vows-step--write { gap: 14px; }
.jlp-vows-canvas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 900px) {
	.jlp-vows-canvas { grid-template-columns: 1fr 1fr; }
}
.jlp-vows-canvas__col { display: flex; flex-direction: column; gap: 8px; }
.jlp-vows-canvas__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}
.jlp-vows-canvas__label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--vw-gold-deep);
	font-weight: 600;
}
.jlp-vows-canvas__hint { font-size: .76rem; color: var(--vw-ink-mute); }
.jlp-vows-write {
	font-family: var(--vw-ff-display);
	font-size: 1.18rem;
	line-height: 1.8;
	min-height: 280px;
	resize: vertical;
	background: #fffdf9;
	border-radius: 10px;
	padding: 16px 18px;
}
.jlp-vows-write:focus {
	box-shadow: 0 0 0 3px var(--jlp-gold-glow);
	outline: none;
}
.jlp-vows-write--final {
	background: var(--jlp-surface);
	border-color: var(--vw-gold);
}

/* ---------------- tools: estimate + checklist ---------------- */
.jlp-vows-tools {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 760px) {
	.jlp-vows-tools { grid-template-columns: 1fr 1fr; align-items: start; }
}
.jlp-vows-estimate {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--vw-line);
	background: var(--vw-cream);
	font-size: .88rem;
}
.jlp-vows-estimate__nums { font-weight: 600; color: var(--vw-ink); }
.jlp-vows-estimate__msg { color: var(--vw-ink-soft); }
.jlp-vows-estimate[data-state="ok"] { border-color: var(--vw-ok); background: #f1f7f1; }
.jlp-vows-estimate[data-state="ok"] .jlp-vows-estimate__msg { color: var(--vw-ok); }
.jlp-vows-estimate[data-state="near"] { border-color: var(--vw-gold); }
.jlp-vows-estimate[data-state="short"],
.jlp-vows-estimate[data-state="long"] { border-color: var(--vw-warn); background: #fdf4e8; }
.jlp-vows-estimate[data-state="short"] .jlp-vows-estimate__msg,
.jlp-vows-estimate[data-state="long"] .jlp-vows-estimate__msg { color: var(--vw-warn); }

.jlp-vows-checklist-wrap {
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--vw-line);
	background: var(--vw-paper);
}
.jlp-vows-checklist__title {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--vw-ink-mute);
	margin: 0 0 8px;
}
.jlp-vows-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.jlp-vows-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .88rem;
	color: var(--vw-ink-mute);
	line-height: 1.45;
}
.jlp-vows-checklist li.is-ok { color: var(--vw-ink); }
.jlp-vows-checklist__mark {
	flex: 0 0 1.1rem;
	text-align: center;
	font-weight: 700;
	color: var(--vw-ink-mute);
}
.jlp-vows-checklist li.is-ok .jlp-vows-checklist__mark { color: var(--vw-ok); }

/* ---------------- private notes + next ---------------- */
.jlp-vows-private { margin-top: 4px; }

.jlp-vows-next {
	font-size: .9rem;
	color: var(--vw-ink-soft);
	background: var(--vw-cream);
	border: 1px dashed var(--vw-line-strong);
	border-radius: 10px;
	padding: 10px 14px;
}
.jlp-vows-next__label {
	font-weight: 700;
	color: var(--vw-gold-deep);
	margin-right: 4px;
}

/* ---------------- read-only / preview ---------------- */
.jlp-vows[data-readonly="1"] .jlp-input[disabled],
.jlp-vows[data-readonly="1"] textarea[disabled] {
	background: #faf7f2;
	color: var(--vw-ink-soft);
	cursor: default;
}
.jlp-vows[data-readonly="1"] .jlp-vows-version__del,
.jlp-vows[data-readonly="1"] .jlp-vows-add-version,
.jlp-vows[data-readonly="1"] .jlp-vows-prompts { display: none; }

/* ---------------- public (marketing) page ---------------- */
.jlp-vows-public {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-family: var(--vw-ff-body);
	color: var(--vw-ink-soft);
}
.jlp-vows-public > p { font-size: 1.02rem; line-height: 1.7; }
.jlp-vows-public__privacy {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	background: var(--vw-cream);
	border: 1px solid var(--vw-line);
	border-radius: var(--vw-radius);
	font-size: .92rem;
}
.jlp-vows-public__perks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.jlp-vows-public__perks li {
	position: relative;
	padding-left: 22px;
	font-size: .95rem;
}
.jlp-vows-public__perks li::before {
	content: "♥";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--vw-gold);
	font-size: .9rem;
}
.jlp-vows-public__steps ol {
	margin: 8px 0 0;
	padding-left: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.jlp-vows-public__steps li strong { display: block; color: var(--vw-ink); font-family: var(--vw-ff-display); font-size: 1.05rem; }
.jlp-vows-public__steps li span { font-size: .9rem; color: var(--vw-ink-mute); }
.jlp-vows-public__tones ul {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .92rem;
}
.jlp-vows-public__tones li strong { color: var(--vw-ink); }
.jlp-vows-public__cta {
	font-size: .98rem;
	background: var(--vw-cream);
	border-radius: var(--vw-radius);
	padding: 14px 16px;
	color: var(--vw-ink-soft);
}

/* ---------------- print fallback (HtmlPrintAdapter handles paid exports) ---------------- */
@media print {
	.jlp-vows-locked,
	.jlp-vows-prompts,
	.jlp-vows-nav,
	.jlp-vows-rail,
	.jlp-vows-add-version,
	.jlp-vows-version__del { display: none !important; }
	.jlp-vows-step[hidden] { display: block !important; }
}