/* ===== PDF Editor — landing + text layer + editor chrome ===== */
/* Uses ONLY theme design tokens (style.css :root), so dark mode matches automatically. */

/* --- hidden must always win over display rules below --- */
.pe-shell [hidden] {
	display: none !important;
}

.pe-shell {
	gap: var(--spacing-8);
}

/* --- Text layer: official pdf.js 2.16.105 rules (Mozilla viewer) --- */
.textLayer {
	position: absolute;
	text-align: initial;
	inset: 0;
	overflow: hidden;
	opacity: 0.25;
	line-height: 1;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	forced-color-adjust: none;
	transform-origin: 0 0;
	caret-color: CanvasText;
	z-index: 1;
}

.textLayer span,
.textLayer br {
	color: transparent;
	position: absolute;
	white-space: pre;
	cursor: text;
	transform-origin: 0% 0%;
}

.pdf-editor-shell .textLayer {
	opacity: 1;
}

.pdf-editor-shell .textLayer span {
	transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
	border-radius: 2px;
	box-shadow: 0 0 0 0 transparent;
}

.pdf-editor-shell .textLayer span:hover,
.pdf-editor-shell .textLayer span:focus-visible {
	box-shadow: 0 0 0 2px var(--color-accent);
	background: var(--color-accent-soft);
	cursor: pointer;
	outline: none;
}

.pdf-editor-shell .textLayer span.pdf-selected {
	box-shadow: 0 0 0 2px var(--color-accent);
	background: var(--color-accent-soft);
}

.pdf-editor-shell .textLayer span.pdf-edited {
	color: var(--color-accent-text);
	background: var(--color-accent-soft);
	box-shadow: 0 0 0 2px var(--color-accent);
	font-weight: 700;
}

/* --- Hero --- */
.pe-hero {
	text-align: center;
	width: 100%;
	max-width: 640px;
	justify-self: center;
	margin-top: var(--spacing-6);
}

.pe-hero .eyebrow {
	margin-bottom: var(--spacing-3);
}

.pe-chip {
	display: inline-block;
	margin: 0 0 var(--spacing-3);
	padding: .3rem 1rem;
	border-radius: 10px;
	background: var(--color-accent-soft);
	color: var(--color-accent-text);
	font-weight: 700;
	font-size: var(--font-size-lg);
	letter-spacing: var(--tracking-snug);
}

.pe-hero h1 {
	font-size: var(--font-size-4xl);
	font-weight: 800;
	letter-spacing: var(--tracking-tight);
	margin: 0 0 var(--spacing-3);
}

.pe-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 var(--spacing-4);
	padding: .3rem .95rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-bg-subtle);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.pe-pill svg {
	color: var(--color-accent);
	flex-shrink: 0;
}

.pe-desc {
	margin: 0 auto;
	max-width: 540px;
	color: var(--color-text-secondary);
	font-size: var(--font-size-base);
}

/* --- Upload / dropzone --- */
.pe-upload {
	width: 100%;
	max-width: 640px;
	justify-self: center;
}

.pe-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-3);
	padding: var(--spacing-16) var(--spacing-6);
	border: 1.5px dashed var(--color-border);
	border-radius: var(--radius-xl);
	background: var(--color-surface);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.pe-dropzone:hover,
.pe-dropzone:focus-visible,
.pe-dropzone.dragover {
	border-color: var(--color-accent);
	outline: none;
}

.pe-dropzone > svg {
	color: var(--color-accent);
}

.pe-select-btn {
	display: inline-block;
	padding: .6rem 1.5rem;
	border-radius: 10px;
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-weight: 600;
	font-size: var(--font-size-base);
	transition: background-color var(--transition-fast);
}

.pe-dropzone:hover .pe-select-btn {
	background: var(--color-accent-hover);
}

.pe-drop-hint {
	color: var(--color-muted);
	font-size: var(--font-size-sm);
}

/* --- Feature chips --- */
.pe-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-3);
	width: 100%;
	max-width: 760px;
	justify-self: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pe-chips li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: var(--color-surface);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.pe-chips svg {
	color: var(--color-accent);
	flex-shrink: 0;
}

/* --- Status --- */
.pe-shell > .status {
	width: 100%;
	max-width: 640px;
	justify-self: center;
	margin: 0;
	text-align: center;
}

/* --- Editor shell --- */
.pdf-editor-shell {
	display: grid;
	gap: var(--spacing-4);
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--spacing-5);
	box-shadow: var(--shadow-card);
}

.pdf-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-3);
}

.pdf-toolbar-group {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
}

.pdf-toolbar-label {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
	min-width: 4.5em;
	text-align: center;
}

.pdf-toolbar .convert-btn {
	justify-self: auto;
	padding: .5rem 1.1rem;
}

.pdf-stage {
	overflow: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: var(--spacing-4);
	display: flex;
	justify-content: center;
	min-height: 320px;
}

.pdf-page-wrap {
	position: relative;
	line-height: 0;
	flex-shrink: 0;
}

.pdf-page-wrap canvas {
	display: block;
	box-shadow: var(--shadow-card);
	background: #fff;
}

.pdf-hint {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	text-align: center;
}

/* --- Inline edit popup --- */
.edit-popup {
	position: absolute;
	z-index: 20;
	display: grid;
	gap: var(--spacing-2);
	width: 280px;
	max-width: 92%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-hover);
	padding: var(--spacing-3);
	line-height: var(--leading-normal);
}

.edit-popup label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-muted);
}

.edit-popup textarea {
	width: 100%;
	padding: .5rem .7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--font-size-sm);
	background: var(--color-bg);
	color: var(--color-text);
	resize: vertical;
}

.edit-popup textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

.edit-popup-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-2);
}

.edit-popup .convert-btn {
	padding: .45rem .9rem;
	justify-self: auto;
}

/* --- Mobile --- */
@media (max-width: 600px) {
	.pe-dropzone {
		padding: var(--spacing-10) var(--spacing-4);
	}
	.pe-hero h1 {
		font-size: var(--font-size-3xl);
	}
	.pdf-editor-shell {
		padding: var(--spacing-3);
	}
	.pdf-toolbar {
		justify-content: center;
	}
	.pdf-toolbar-actions {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
	.pdf-stage {
		padding: var(--spacing-2);
		justify-content: flex-start;
	}
	.edit-popup {
		width: 240px;
	}
}