/* JL Planners — Place Card Planner ("Winietki"). Mobile-first; builds on the
 * foundation jlp-shell tokens (--jlp-*). Scoped under .jlp-pc.
 * The .jlp-pc-sheet / .jlp-pc-card rules below mirror the print template
 * (templates/print-cards.php) so the editor preview matches the printed sheet. */

.jlp-pc {
	--pc-line: var(--jlp-line, rgba(184, 152, 104, .35));
	--pc-surface: var(--jlp-surface, #fff);
	--pc-radius: var(--jlp-radius, 8px);
	--pc-warn: #b35a1a;
	--pc-error: var(--jlp-error, #a83a3a);
	--pc-ok: #4f7a3a;
	color: var(--jlp-ink, #2a2520);
	font-family: var(--jlp-ff-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

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

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

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

.jlp-pc .jlp-muted { color: var(--jlp-ink-soft, #6b5c53); font-size: .9rem; }

/* ---------- Locked banner (free preview) ---------- */
.jlp-pc-locked {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .6rem .9rem;
	background: var(--jlp-champagne, #f7efe2);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: .8rem 1rem;
	margin: 0 0 1rem;
}
.jlp-pc-locked__icon { display: inline-flex; line-height: 0; color: var(--jlp-gold-deep, #8c6f3f); }
.jlp-pc-locked__icon svg { width: 1.15rem; height: 1.15rem; }
.jlp-pc-locked__text { flex: 1 1 16rem; font-size: .92rem; color: var(--jlp-ink-soft, #5b554d); }

/* ---------- Meta header ---------- */
.jlp-pc-head { margin: 0 0 1rem; }
.jlp-pc-head__grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.jlp-pc-head__notes { display: block; margin-top: .7rem; }
.jlp-pc .jlp-field { display: block; }
.jlp-pc .jlp-field__label { display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--jlp-ink-soft, #6b5c53); margin-bottom: .25rem; }
.jlp-pc .jlp-input {
	width: 100%;
	font: inherit;
	padding: .5rem .6rem;
	border: 1px solid var(--pc-line);
	border-radius: 4px;
	background: var(--pc-surface);
	color: inherit;
}
.jlp-pc .jlp-input:focus { outline: 2px solid var(--jlp-accent, #b89968); outline-offset: 1px; }
.jlp-pc textarea.jlp-input { resize: vertical; }

/* ---------- Design panel ---------- */
.jlp-pc-design {
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: .9rem 1rem 1rem;
	margin: 0 0 1rem;
}
.jlp-pc-design__title { font-family: var(--jlp-ff-display, Georgia, serif); font-weight: 500; font-size: 1.05rem; margin: 0 0 .7rem; }
.jlp-pc-design__row { margin-bottom: .9rem; }
.jlp-pc-design__row > .jlp-field__label { margin-bottom: .4rem; }
.jlp-pc-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.jlp-pc-swatch {
	display: flex; align-items: center; gap: .55rem;
	padding: .5rem .55rem;
	border: 1px solid var(--pc-line);
	border-radius: 6px;
	background: var(--pc-surface);
	cursor: pointer;
	font: inherit;
	text-align: left;
	transition: border-color .15s, box-shadow .15s;
}
.jlp-pc-swatch:hover { border-color: var(--jlp-accent, #b89968); }
.jlp-pc-swatch.is-active { border-color: var(--jlp-accent, #b89968); box-shadow: 0 0 0 2px rgba(184, 152, 104, .25); }
.jlp-pc-swatch__chip {
	flex: 0 0 auto;
	width: 2.4rem; height: 1.8rem;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	border-radius: 3px;
	background: var(--pc-sw-bg, #fff);
	color: var(--pc-sw-ink, #2a2520);
	font-family: var(--jlp-ff-display, Georgia, serif);
	font-size: .8rem;
	border: 1px solid rgba(0, 0, 0, .12);
}
.jlp-pc-swatch__chip-rule { width: 1rem; height: 2px; background: var(--pc-sw-accent, #b89968); margin-bottom: 2px; }
.jlp-pc-swatch__label { font-size: .85rem; line-height: 1.2; }
.jlp-pc-design__grid { display: grid; grid-template-columns: 1fr; gap: .7rem; margin-bottom: .9rem; }
.jlp-pc-design__toggles { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.jlp-pc-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }

/* ---------- Toolbar ---------- */
.jlp-pc-toolbar {
	display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
	padding: .55rem .6rem;
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	margin-bottom: .7rem;
}
.jlp-pc-toolbar__spacer { flex: 1 1 auto; }
.jlp-pc .jlp-btn {
	font: inherit;
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid var(--jlp-accent, #b89968);
	background: var(--jlp-accent, #b89968);
	color: #fff;
	padding: .5rem .8rem;
}
.jlp-pc .jlp-btn--ghost { background: transparent; color: var(--jlp-accent-ink, #6b5c53); border-color: var(--pc-line); }
.jlp-pc .jlp-btn--sm { padding: .35rem .6rem; font-size: .85rem; }
.jlp-pc .jlp-btn--block { display: block; width: 100%; }
.jlp-pc .jlp-btn--primary { background: var(--jlp-accent, #b89968); border-color: var(--jlp-accent, #b89968); color: #fff; }
.jlp-pc .jlp-btn:disabled { opacity: .5; cursor: not-allowed; }
.jlp-pc .jlp-btn:focus-visible { outline: 2px solid var(--jlp-accent, #b89968); outline-offset: 2px; }

/* ---------- Progress ---------- */
.jlp-pc-progress { font-size: .85rem; color: var(--jlp-ink-soft, #6b5c53); margin: 0 0 .5rem; }

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

/* ---------- Card list ---------- */
.jlp-pc-list { display: flex; flex-direction: column; gap: .5rem; }
.jlp-pc-card-row {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"handle name"
		"handle table"
		"handle menu"
		"handle allergy"
		"handle note"
		"handle actions";
	gap: .35rem .5rem;
	align-items: center;
	padding: .55rem .6rem;
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: 6px;
}
.jlp-pc-card-row__handle { grid-area: handle; align-self: center; color: var(--jlp-ink-soft, #b8a98e); cursor: grab; user-select: none; font-size: 1rem; line-height: 1; }
.jlp-pc-card-row__field { display: block; }
.jlp-pc-card-row__field--name { grid-area: name; }
.jlp-pc-card-row__field--table { grid-area: table; }
.jlp-pc-card-row__field--menu { grid-area: menu; }
.jlp-pc-card-row__field--allergy { grid-area: allergy; }
.jlp-pc-card-row__field--note { grid-area: note; }
.jlp-pc-card-row__field--name .jlp-input { font-weight: 600; }
.jlp-pc-card-row__actions { grid-area: actions; display: flex; gap: .25rem; justify-content: flex-end; }
.jlp-pc-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(--pc-line);
	border-radius: 4px;
	background: var(--pc-surface);
	cursor: pointer;
}
.jlp-pc-iconbtn:hover { border-color: var(--jlp-accent, #b89968); }
.jlp-pc-iconbtn--danger:hover { border-color: var(--pc-error); color: var(--pc-error); }

/* Hide per-card columns whose toggle is off (data persists in the DOM). */
.jlp-pc[data-show-table="0"] .jlp-pc-card-row__field--table,
.jlp-pc[data-show-menu="0"] .jlp-pc-card-row__field--menu,
.jlp-pc[data-show-allergy="0"] .jlp-pc-card-row__field--allergy { display: none; }

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

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

/* ---------- Side: preview + warnings ---------- */
.jlp-pc-preview-box {
	background: var(--pc-surface);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: .8rem;
	margin-bottom: 1rem;
}
.jlp-pc-preview-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.jlp-pc-preview-box__title { font-family: var(--jlp-ff-display, Georgia, serif); font-weight: 500; font-size: 1.05rem; margin: 0; }
.jlp-pc-preview-box__nav { display: inline-flex; gap: .35rem; align-items: center; font-size: .8rem; color: var(--jlp-ink-soft, #6b5c53); }
.jlp-pc-preview-box__nav button { font: inherit; border: 1px solid var(--pc-line); background: var(--pc-surface); border-radius: 3px; cursor: pointer; width: 1.6rem; height: 1.6rem; line-height: 1; }
.jlp-pc-preview-box__nav button:disabled { opacity: .4; cursor: not-allowed; }
.jlp-pc-preview-box__hint { margin: .6rem 0 0; font-size: .8rem; }

/* The A4 preview viewport: scrollable, scaled-down sheets. */
.jlp-pc-preview {
	position: relative;
	background: #e9e6e1;
	border-radius: 4px;
	padding: 10px;
	overflow: auto;
	max-height: 70vh;
}
.jlp-pc-preview__watermark {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none; z-index: 4;
}
.jlp-pc-preview__watermark span {
	font: 700 2.6rem var(--jlp-ff-body, system-ui, sans-serif);
	color: rgba(0, 0, 0, .1);
	transform: rotate(-26deg);
	letter-spacing: .25em;
	text-transform: uppercase;
}
.jlp-pc-sheets { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.jlp-pc-sheets__empty { padding: 2rem 1rem; text-align: center; }

/* A4 sheet at real size, shrunk to fit the column via CSS `zoom` (scales the
 * layout box too, so no overflow / negative-margin hacks needed). JS sets
 * --pc-scale from the available width; browsers without `zoom` just show the
 * sheet full size with a scrollbar — degraded but usable. */
.jlp-pc-sheet {
	position: relative;
	width: 210mm; height: 297mm;
	background: #fff;
	box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .4);
	flex: 0 0 auto;
	zoom: var(--pc-scale, .42);
}
.jlp-pc-sheet__grid {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	grid-template-columns: repeat(var(--pc-cols), var(--pc-cw));
	grid-template-rows: repeat(var(--pc-rows), var(--pc-ch));
	gap: 0;
}

/* Card visuals (kept in sync with templates/print-cards.php). */
.jlp-pc-card {
	position: relative;
	width: var(--pc-cw); height: var(--pc-ch);
	background: var(--pc-bg, #fff);
	color: var(--pc-ink, #2a2520);
	overflow: hidden;
}
.jlp-pc-card__half,
.jlp-pc-card__face {
	position: relative;
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 6mm 5mm; height: 100%;
}
.jlp-pc-sheet[data-format="folded"] .jlp-pc-card__half { height: var(--pc-fold); }
.jlp-pc-sheet[data-format="folded"] .jlp-pc-card__half--top { transform: rotate(180deg); }
.jlp-pc-card__fold {
	position: absolute; left: 0; right: 0; top: var(--pc-fold);
	border-top: .3mm dashed rgba(0, 0, 0, .35);
	pointer-events: none;
}
.jlp-pc-card__content { display: flex; flex-direction: column; align-items: center; gap: 2mm; width: 100%; font-family: var(--pc-font, Georgia, serif); }
.jlp-pc-card__couple { font-size: calc(8pt * var(--pc-name-scale, 1)); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.jlp-pc-card__name { font-size: calc(20pt * var(--pc-name-scale, 1)); line-height: 1.1; font-weight: 500; word-break: break-word; }
.jlp-pc-card__rule { display: block; width: 18mm; height: .4mm; background: var(--pc-accent, #b89968); }
.jlp-pc-card__meta { display: flex; align-items: center; gap: 3mm; font-size: calc(8.5pt * var(--pc-name-scale, 1)); opacity: .85; }
.jlp-pc-card__table { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .04em; }
.jlp-pc-card__menu { font-size: calc(11pt * var(--pc-name-scale, 1)); }
.jlp-pc-card__allergy { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: calc(7.5pt * var(--pc-name-scale, 1)); opacity: .75; font-style: italic; }
.jlp-pc-card__note { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: calc(7.5pt * var(--pc-name-scale, 1)); opacity: .65; }
.jlp-pc-card[data-font="modern"] .jlp-pc-card__name { text-transform: uppercase; letter-spacing: .06em; }
.jlp-pc-card[data-template="gold"] .jlp-pc-card__name { color: var(--pc-accent); }
.jlp-pc-card[data-template="minimalist"] .jlp-pc-card__rule { height: .25mm; }
.jlp-pc-card[data-template="summer"] .jlp-pc-card__rule { background: linear-gradient(90deg, var(--pc-accent), rgba(232,145,90,.4)); }
.jlp-pc-card[data-template="botanical"] { background-image: radial-gradient(circle at 6mm 6mm, rgba(122,154,94,.18) 0 1.4mm, transparent 1.5mm), radial-gradient(circle at calc(100% - 6mm) calc(100% - 6mm), rgba(122,154,94,.18) 0 1.4mm, transparent 1.5mm); }
.jlp-pc-card[data-template="romantic"] { background-image: radial-gradient(circle at 7mm calc(100% - 7mm), rgba(201,139,139,.16) 0 2mm, transparent 2.1mm); }

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

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

/* ---------- Public landing extras ---------- */
.jlp-pc-public__perks { margin: 1rem 0; padding-left: 1.2rem; }
.jlp-pc-public__perks li { margin: .3rem 0; }
.jlp-pc-public__templates,
.jlp-pc-public__formats { margin: 1rem 0; }
.jlp-pc-public__templates ul,
.jlp-pc-public__formats ul { margin: .4rem 0; padding-left: 1.2rem; }
.jlp-pc-public__cta { font-weight: 600; margin-top: 1rem; }
.jlp-pc .jlp-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--jlp-accent-ink, #8c6f3f); margin: 0 0 .3rem; }

/* ---------- Read-only ---------- */
.jlp-pc[data-readonly="1"] .jlp-pc-toolbar,
.jlp-pc[data-readonly="1"] .jlp-pc-card-row__actions,
.jlp-pc[data-readonly="1"] .jlp-pc-card-row__handle { display: none; }

/* ---------- Desktop layout ---------- */
@media (min-width: 720px) {
	.jlp-pc-head__grid { grid-template-columns: 1fr 1fr 1fr; }
	.jlp-pc-design__grid { grid-template-columns: 1fr 1fr 1fr; }
	.jlp-pc-swatches { grid-template-columns: repeat(3, 1fr); }
	.jlp-pc-card-row {
		grid-template-columns: auto minmax(10rem, 1.6fr) minmax(5rem, .8fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(6rem, 1fr) auto;
		grid-template-areas: "handle name table menu allergy note actions";
	}
}
@media (min-width: 1020px) {
	.jlp-pc-body { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
	.jlp-pc-side { position: sticky; top: 1rem; align-self: start; }
}