/* JL Planners — Thank You Cards Planner ("Planer kartek z podziękowaniami").
 * Mobile-first; builds on the foundation jlp-shell tokens (--jlp-*). Scoped under
 * .jlp-tyc. Premium "Polish wedding" palette: warm ivory, blush, muted gold,
 * deep green accents. */

.jlp-tyc {
	--tyc-line: var(--jlp-line, rgba(176, 141, 87, .35));
	--tyc-surface: var(--jlp-surface, #fff);
	--tyc-radius: var(--jlp-radius, 8px);
	--tyc-ivory: var(--jlp-champagne, #faf5ec);
	--tyc-gold: var(--jlp-accent, #b08d57);
	--tyc-gold-ink: var(--jlp-accent-ink, #8c6f3f);
	--tyc-blush: #c98b8b;
	--tyc-green: #6f8f5a;
	--tyc-warn: #b06b2e;
	--tyc-error: var(--jlp-error, #a83a3a);
	--tyc-ok: #4f7a3a;
	/* status tones */
	--tyc-todo: #b06b2e;
	--tyc-written: #8a7d3a;
	--tyc-printed: #4a7a8c;
	--tyc-sent: #4f7a3a;
	color: var(--jlp-ink, #2a221c);
	font-family: var(--jlp-ff-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.jlp-tyc *,
.jlp-tyc *::before,
.jlp-tyc *::after { box-sizing: border-box; }

.jlp-tyc .jlp-tyc-h2 {
	font-family: var(--jlp-ff-display, Georgia, serif);
	font-weight: 500;
	font-size: 1.4rem;
	margin: 0 0 .6rem;
}

.jlp-tyc .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.jlp-tyc .jlp-muted { color: var(--jlp-ink-soft, #6b5c53); font-size: .9rem; }
.jlp-tyc .jlp-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--tyc-gold-ink); margin: 0 0 .3rem; }

/* ---------- buttons (local copies so the editor is self-styled) ---------- */
.jlp-tyc .jlp-btn {
	font: inherit;
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid var(--tyc-gold);
	background: var(--tyc-gold);
	color: #fff;
	padding: .5rem .8rem;
}
.jlp-tyc .jlp-btn--ghost { background: transparent; color: var(--tyc-gold-ink); border-color: var(--tyc-line); }
.jlp-tyc .jlp-btn--sm { padding: .35rem .6rem; font-size: .85rem; }
.jlp-tyc .jlp-btn--block { display: block; width: 100%; }
.jlp-tyc .jlp-btn--primary { background: var(--tyc-gold); border-color: var(--tyc-gold); color: #fff; }
.jlp-tyc .jlp-btn:disabled { opacity: .5; cursor: not-allowed; }
.jlp-tyc .jlp-btn:focus-visible { outline: 2px solid var(--tyc-gold); outline-offset: 2px; }

/* ---------- fields ---------- */
.jlp-tyc .jlp-field { display: block; }
.jlp-tyc .jlp-field__label { display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--jlp-ink-soft, #6b5c53); margin-bottom: .25rem; }
.jlp-tyc .jlp-input {
	width: 100%;
	font: inherit;
	padding: .5rem .6rem;
	border: 1px solid var(--tyc-line);
	border-radius: 4px;
	background: var(--tyc-surface);
	color: inherit;
}
.jlp-tyc .jlp-input:focus { outline: 2px solid var(--tyc-gold); outline-offset: 1px; }
.jlp-tyc textarea.jlp-input { resize: vertical; }

/* ---------- locked banner + free action bar ---------- */
.jlp-tyc-locked {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .6rem .9rem;
	background: var(--tyc-ivory);
	border: 1px solid var(--tyc-line);
	border-radius: var(--tyc-radius);
	padding: .8rem 1rem;
	margin: 0 0 .8rem;
}
.jlp-tyc-locked__icon { display: inline-flex; line-height: 0; color: var(--jlp-gold-deep, #8c6f3f); }
.jlp-tyc-locked__icon svg { width: 1.15rem; height: 1.15rem; }
.jlp-tyc-locked__text { flex: 1 1 16rem; font-size: .92rem; color: var(--jlp-ink-soft, #5b524a); }
.jlp-tyc-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.jlp-tyc-autosave-hint { margin: 0 0 .8rem; }

/* ---------- meta header ---------- */
.jlp-tyc-head { margin: 0 0 1rem; }
.jlp-tyc-head__grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.jlp-tyc-head__notes { display: block; margin-top: .7rem; }

/* ---------- pipeline mini-board ---------- */
.jlp-tyc-pipeline { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 0 0 .7rem; }
.jlp-tyc-stage {
	display: flex; flex-direction: column; gap: .15rem;
	padding: .5rem .65rem;
	border: 1px solid var(--tyc-line);
	border-left-width: 4px;
	border-radius: 5px;
	background: var(--tyc-surface);
}
.jlp-tyc-stage--todo { border-left-color: var(--tyc-todo); }
.jlp-tyc-stage--written { border-left-color: var(--tyc-written); }
.jlp-tyc-stage--printed { border-left-color: var(--tyc-printed); }
.jlp-tyc-stage--sent { border-left-color: var(--tyc-sent); }
.jlp-tyc-stage__count { font-family: var(--jlp-ff-display, Georgia, serif); font-size: 1.4rem; font-weight: 500; line-height: 1; }
.jlp-tyc-stage__label { font-size: .78rem; color: var(--jlp-ink-soft, #6b5c53); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- progress / next-best ---------- */
.jlp-tyc-progress { font-size: .85rem; color: var(--jlp-ink-soft, #6b5c53); margin: 0 0 .2rem; }
.jlp-tyc-nextbest { font-size: .9rem; margin: 0 0 .8rem; padding-left: .7rem; border-left: 3px solid var(--tyc-gold); color: var(--jlp-ink, #2a221c); }

/* ---------- two-pane body ---------- */
.jlp-tyc-body { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }

/* ---------- toolbar + bulk bar ---------- */
.jlp-tyc-toolbar,
.jlp-tyc-bulkbar {
	display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
	padding: .55rem .6rem;
	background: var(--tyc-surface);
	border: 1px solid var(--tyc-line);
	border-radius: var(--tyc-radius);
	margin-bottom: .7rem;
}
.jlp-tyc-bulkbar { background: var(--tyc-ivory); }
.jlp-tyc-bulkbar[hidden] { display: none; }
.jlp-tyc-bulkbar__count { font-size: .85rem; font-weight: 600; margin-right: .3rem; }
.jlp-tyc-bulkbar__field { display: inline-flex; }
.jlp-tyc-bulkbar__field .jlp-input { width: auto; min-width: 9rem; padding: .35rem .5rem; font-size: .85rem; }

/* ---------- recipient list ---------- */
.jlp-tyc-list { display: flex; flex-direction: column; gap: .5rem; }
.jlp-tyc-row {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas:
		"pick chip name"
		"pick chip gift"
		"pick chip status"
		"pick chip variant"
		"pick chip sent"
		"more more more"
		"actions actions actions";
	gap: .35rem .5rem;
	align-items: center;
	padding: .6rem .65rem;
	background: var(--tyc-surface);
	border: 1px solid var(--tyc-line);
	border-radius: 6px;
	position: relative;
}
.jlp-tyc-row__pick { grid-area: pick; align-self: start; padding-top: .3rem; }
.jlp-tyc-row__chip { grid-area: chip; align-self: stretch; width: 4px; border-radius: 2px; background: var(--tyc-line); }
.jlp-tyc-row__chip--todo { background: var(--tyc-todo); }
.jlp-tyc-row__chip--written { background: var(--tyc-written); }
.jlp-tyc-row__chip--printed { background: var(--tyc-printed); }
.jlp-tyc-row__chip--sent { background: var(--tyc-sent); }
.jlp-tyc-row__field { display: block; }
.jlp-tyc-row__field--name { grid-area: name; }
.jlp-tyc-row__field--gift { grid-area: gift; }
.jlp-tyc-row__field--status { grid-area: status; }
.jlp-tyc-row__field--variant { grid-area: variant; }
.jlp-tyc-row__field--sent { grid-area: sent; }
.jlp-tyc-row__field--name .jlp-input { font-weight: 600; }
.jlp-tyc-row__more { grid-area: more; font-size: .9rem; }
.jlp-tyc-row__more > summary { cursor: pointer; color: var(--tyc-gold-ink); font-size: .82rem; padding: .15rem 0; user-select: none; }
.jlp-tyc-row__more .jlp-field { margin-top: .4rem; }
.jlp-tyc-row__actions { grid-area: actions; display: flex; gap: .25rem; justify-content: flex-end; }
.jlp-tyc-iconbtn {
	font: inherit; line-height: 1;
	width: 1.9rem; height: 1.9rem;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--tyc-line);
	border-radius: 4px;
	background: var(--tyc-surface);
	cursor: pointer;
}
.jlp-tyc-iconbtn svg { width: 1rem; height: 1rem; }
.jlp-tyc-iconbtn:hover { border-color: var(--tyc-gold); }
.jlp-tyc-iconbtn--danger:hover { border-color: var(--tyc-error); color: var(--tyc-error); }

/* ---------- empty state ---------- */
.jlp-tyc-empty {
	border: 1px dashed var(--tyc-line);
	border-radius: var(--tyc-radius);
	padding: 1.4rem 1rem;
	text-align: center;
	background: var(--tyc-ivory);
}
.jlp-tyc-empty[hidden] { display: none; }
.jlp-tyc-empty__title { font-family: var(--jlp-ff-display, Georgia, serif); font-size: 1.1rem; margin: 0 0 .3rem; }
.jlp-tyc-empty__body { color: var(--jlp-ink-soft, #6b5c53); margin: 0 0 .8rem; }
.jlp-tyc-empty__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }

.jlp-tyc-mirror { display: none; }

/* ---------- side: preview + warnings ---------- */
.jlp-tyc-preview-box {
	background: var(--tyc-surface);
	border: 1px solid var(--tyc-line);
	border-radius: var(--tyc-radius);
	padding: .8rem;
	margin-bottom: 1rem;
}
.jlp-tyc-preview-box__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.jlp-tyc-preview-box__title { font-family: var(--jlp-ff-display, Georgia, serif); font-weight: 500; font-size: 1.05rem; margin: 0; }
.jlp-tyc-preview-box__pick select { font: inherit; border: 1px solid var(--tyc-line); border-radius: 3px; background: var(--tyc-surface); padding: .2rem .35rem; max-width: 12rem; }
.jlp-tyc-preview-box__hint { margin: .6rem 0 0; font-size: .8rem; }

.jlp-tyc-preview {
	position: relative;
	background: var(--tyc-ivory);
	border-radius: 4px;
	padding: 12px;
}
.jlp-tyc-preview__watermark {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none; z-index: 4;
}
.jlp-tyc-preview__watermark span {
	font: 700 2.4rem var(--jlp-ff-body, system-ui, sans-serif);
	color: rgba(0, 0, 0, .09);
	transform: rotate(-24deg);
	letter-spacing: .2em;
	text-transform: uppercase;
}
.jlp-tyc-card {
	background: #fff;
	border: 1px solid var(--tyc-line);
	border-radius: 4px;
	padding: 1.1rem 1.2rem;
	box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .3);
	min-height: 9rem;
}
.jlp-tyc-card__for { font-family: var(--jlp-ff-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; color: var(--tyc-gold-ink); margin: 0 0 .6rem; }
.jlp-tyc-card__text { font-family: var(--jlp-ff-display, "Cormorant Garamond", Georgia, serif); font-size: 1.18rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.jlp-tyc-card__empty { margin: 0; padding: 1.6rem .5rem; text-align: center; }

/* ---------- warnings ---------- */
.jlp-tyc-warnings {
	background: var(--tyc-surface);
	border: 1px solid var(--tyc-line);
	border-radius: var(--tyc-radius);
	padding: .8rem 1rem;
}
.jlp-tyc-warnings__title { font-family: var(--jlp-ff-display, Georgia, serif); font-weight: 500; font-size: 1.05rem; margin: 0 0 .5rem; }
.jlp-tyc-warnings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.jlp-tyc-warn { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; padding-left: .8rem; border-left: 3px solid transparent; }
.jlp-tyc-warn--info { border-left-color: var(--jlp-line, #d8c8a8); color: var(--jlp-ink-soft, #6b5c53); }
.jlp-tyc-warn--warn { border-left-color: var(--tyc-warn); }
.jlp-tyc-warn--error { border-left-color: var(--tyc-error); color: var(--tyc-error); }
.jlp-tyc-warn__action { margin-left: auto; }
.jlp-tyc-warn__action button { font: inherit; font-size: .82rem; border: 1px solid var(--tyc-line); background: var(--tyc-surface); border-radius: 3px; padding: .15rem .45rem; cursor: pointer; white-space: nowrap; }

/* ---------- dialogs ---------- */
.jlp-tyc-dialog { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.jlp-tyc-dialog[hidden] { display: none; }
.jlp-tyc-dialog__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 12, .5); }
.jlp-tyc-dialog__panel {
	position: relative;
	width: min(36rem, 100%);
	max-height: 90vh; overflow: auto;
	background: var(--tyc-surface);
	border-radius: var(--tyc-radius);
	padding: 1.4rem 1.4rem 1.2rem;
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .5);
}
.jlp-tyc-dialog__close { position: absolute; right: .6rem; top: .5rem; border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--jlp-ink-soft, #6b5c53); }
.jlp-tyc-dialog__title { font-family: var(--jlp-ff-display, Georgia, serif); font-weight: 500; font-size: 1.2rem; margin: 0 0 .6rem; padding-right: 1.5rem; }
.jlp-tyc-dialog__textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; margin: .5rem 0; }
.jlp-tyc-dialog__fieldset { border: 1px solid var(--tyc-line); border-radius: 4px; padding: .5rem .7rem; margin: .6rem 0; }
.jlp-tyc-dialog__fieldset legend { padding: 0 .3rem; }
.jlp-tyc-dialog__radio { display: block; font-size: .9rem; margin: .2rem 0; }
.jlp-tyc-dialog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0; }
.jlp-tyc-dialog .jlp-field { margin: .5rem 0; }
.jlp-tyc-dialog__error { color: var(--tyc-error); font-size: .9rem; margin: .4rem 0 0; }
.jlp-tyc-dialog__error[hidden] { display: none; }
.jlp-tyc-dialog__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.jlp-tyc-dialog__danger { color: var(--tyc-error); border-color: var(--tyc-error); }
.jlp-tyc-import__plans { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.jlp-tyc-import__plan { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--tyc-line); border-radius: 4px; cursor: pointer; }
.jlp-tyc-import__plan input { margin: 0; }
.jlp-tyc-import__plan-title { font-weight: 600; }
.jlp-tyc-import__plan-src { font-size: .82rem; color: var(--jlp-ink-soft, #6b5c53); }

/* ---------- public landing extras ---------- */
.jlp-tyc-public__perks { margin: 1rem 0; padding-left: 1.2rem; }
.jlp-tyc-public__perks li { margin: .3rem 0; }
.jlp-tyc-public__variants,
.jlp-tyc-public__stages { margin: 1rem 0; }
.jlp-tyc-public__variants ul { margin: .4rem 0; padding-left: 1.2rem; }
.jlp-tyc-public__pipeline { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .4rem 0 0; counter-reset: tyc-stage; }
.jlp-tyc-public__stage { counter-increment: tyc-stage; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--tyc-line); border-left-width: 4px; border-radius: 4px; font-size: .9rem; }
.jlp-tyc-public__stage::before { content: counter(tyc-stage) "."; font-weight: 600; color: var(--tyc-gold-ink); }
.jlp-tyc-public__stage--todo { border-left-color: #b06b2e; }
.jlp-tyc-public__stage--written { border-left-color: #8a7d3a; }
.jlp-tyc-public__stage--printed { border-left-color: #4a7a8c; }
.jlp-tyc-public__stage--sent { border-left-color: #4f7a3a; }
.jlp-tyc-public__cta { font-weight: 600; margin-top: 1rem; }

/* ---------- read-only ---------- */
.jlp-tyc[data-readonly="1"] .jlp-tyc-toolbar,
.jlp-tyc[data-readonly="1"] .jlp-tyc-bulkbar,
.jlp-tyc[data-readonly="1"] .jlp-tyc-row__pick,
.jlp-tyc[data-readonly="1"] .jlp-tyc-row__actions { display: none; }

/* ---------- desktop layout ---------- */
@media (min-width: 720px) {
	.jlp-tyc-head__grid { grid-template-columns: 1fr 1fr; }
	.jlp-tyc-pipeline { grid-template-columns: repeat(4, 1fr); }
	.jlp-tyc-row {
		grid-template-columns: auto auto minmax(11rem, 1.7fr) minmax(8rem, 1.1fr) minmax(8rem, .9fr) minmax(8rem, .9fr) minmax(7.5rem, .8fr) auto;
		grid-template-areas:
			"pick chip name gift status variant sent actions"
			"more more more more more more more more";
		align-items: center;
	}
}
@media (min-width: 1020px) {
	.jlp-tyc-head__grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
	.jlp-tyc-body { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
	.jlp-tyc-side { position: sticky; top: 1rem; align-self: start; }
}