/* ==========================================================================
   Prompt Layouts — base
   Deliberately theme-deferential: fonts inherit, no background is painted,
   and colours fall back to currentColor so Kadence's own palette shows through.
   Only the accent and the prompt panel assert themselves.
   ========================================================================== */

.prl {
	--prl-accent: #e0603a;
	--prl-ink:    currentColor;
	--prl-muted:  color-mix(in srgb, currentColor 58%, transparent);
	--prl-line:   color-mix(in srgb, currentColor 14%, transparent);
	--prl-panel:  color-mix(in srgb, currentColor 4%, transparent);

	/* The filled button needs a real colour, not currentColor: it recolours its
	   own text to white, and currentColor would resolve against that. */
	--prl-btn:      #14171d;
	--prl-btn-text: #ffffff;

	--prl-radius: 16px;
	--prl-gap:    34px;
	--prl-sticky: 90px;
	--prl-below:  40px;
	/* Unit lives inside the variable: var()+unit does not concatenate in
	   CSS, and fr is not permitted inside calc(). */
	--prl-split-a: 5fr;
	--prl-split-b: 6fr;

	display: block;
	margin: 0 0 var(--prl-below);
	background: none;
	color: inherit;
	box-sizing: border-box;
}

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

/* Typography is the theme's job.
 *
 * Body text inherits on its own, and headings are left alone entirely so
 * Kadence's own h1/h2 font applies — setting font-family:inherit on them would
 * override that with the body face, which is the opposite of what we want.
 *
 * Form controls are the exception: browsers give them a system font by
 * default and will not inherit unless told to. */
.prl button,
.prl input,
.prl select,
.prl textarea {
	font-family: inherit;
}

/* Opt-out: headings drop to the body face when "Match theme heading font" is
   switched off in the layout settings. */
.prl-flat-type h1,
.prl-flat-type h2,
.prl-flat-type h3,
.prl-flat-type .prl-title {
	font-family: inherit;
}

/* Only when a text colour is actually chosen in the settings do the headings
   get recoloured. Left blank, the theme's own heading colour applies. */
.prl-has-ink .prl-title,
.prl-has-ink h2.prl-section-head {
	color: var(--prl-ink);
}

.prl[style*="--prl-max"] { max-width: var(--prl-max); margin-inline: auto; }

/* Older browsers without color-mix get sensible flat fallbacks. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.prl {
		--prl-muted: #6b7280;
		--prl-line:  rgba(0, 0, 0, .12);
		--prl-panel: rgba(0, 0, 0, .035);
	}
}

/* Header
   ========================================================================== */
.prl-head { margin-bottom: 26px; }

.prl-ruled .prl-head {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--prl-line);
}

.prl-crumbs {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--prl-muted);
}
.prl-crumbs a { color: var(--prl-accent); text-decoration: none; }
.prl-crumbs a:hover { text-decoration: underline; }
.prl-crumb-sep { opacity: .5; }
.prl-crumb-current { color: var(--prl-ink); font-weight: 600; }

.prl-meta {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	font-size: .8rem;
	color: var(--prl-muted);
}
.prl-meta-cat { color: var(--prl-accent); font-weight: 600; }
.prl-meta-dot { opacity: .45; }

.prl .prl-title {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
}

/* The accent word is the one flourish in the type: same size, different voice. */
.prl .prl-title-accent {
	color: var(--prl-accent);
	font-style: italic;
	font-weight: 400;
}

.prl .prl-subtitle {
	max-width: 62ch;
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--prl-muted);
}

/* Columns
   ========================================================================== */
.prl-cols {
	display: grid;
	grid-template-columns: minmax(0, var(--prl-split-a)) minmax(0, var(--prl-split-b));
	gap: var(--prl-gap);
	align-items: start;
}

.prl-img-right .prl-visual { order: 2; }
.prl-img-top .prl-cols { grid-template-columns: minmax(0, 1fr); }

/* Visual
   ========================================================================== */
.prl-visual {
	position: relative;
	margin: 0;
	border-radius: var(--prl-radius);
	overflow: hidden;
	line-height: 0;
}

.prl-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

/* Fixed-ratio mode: the frame decides the shape and the picture is cropped or
   letterboxed into it, so a mixed library of portraits and landscapes still
   lines up. Left on auto, each image keeps its own proportions. */
.prl-visual--fixed img {
	aspect-ratio: var(--prl-img-ar, 3 / 4);
	height: 100%;
	object-fit: var(--prl-img-fit, cover);
	object-position: center;
}

@media (min-width: 861px) {
	.prl-sticky.prl-img-left  .prl-visual,
	.prl-sticky.prl-img-right .prl-visual {
		position: sticky;
		top: var(--prl-sticky);
	}
}

.prl-visual-actions {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	gap: 7px;
	line-height: 1;
}

.prl .prl-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #1a1d24;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	cursor: pointer;
	text-decoration: none;
	transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.prl .prl-icon-btn:hover { transform: translateY(-1px); background: #fff; }
.prl .prl-icon-btn.is-active { color: #fff; background: var(--prl-accent); }
.prl .prl-icon-btn.is-active svg { fill: currentColor; }

.prl-visual-tag {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: rgba(15, 18, 24, .62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Panel
   ========================================================================== */
.prl-panel { min-width: 0; }

/* Section headings
   ==========================================================================
   These are h2 elements, so theme h2 rules for size, weight and spacing get
   neutralised. Font family and colour are deliberately NOT set, so the theme's
   heading face and heading colour both come through. */
.prl h2.prl-section-head {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: var(--prl-section-gap, 26px) 0 10px;
	padding: 0;
	border: 0;
	font-size: var(--prl-section-size, .8rem);
	font-weight: var(--prl-section-weight, 700);
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: var(--prl-section-case, none);
}
.prl-panel > h2.prl-section-head:first-child { margin-top: 0; }

.prl-section-n {
	font-size: .9em;
	font-weight: 700;
	line-height: 1;
	color: var(--prl-accent);
	font-variant-numeric: tabular-nums;
}

.prl-section-label {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Prompt panel
   ========================================================================== */
.prl-prompt {
	border: 1px solid var(--prl-line);
	border-radius: 12px;
	background: var(--prl-panel);
	overflow: hidden;
}

.prl-prompt-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--prl-line);
}

.prl-prompt-file {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .72rem;
	color: var(--prl-muted);
}

.prl-prompt-dots { display: inline-flex; gap: 5px; }
.prl-prompt-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--prl-line);
}
.prl-prompt-dots i:first-child { background: color-mix(in srgb, var(--prl-accent) 70%, transparent); }

.prl-prompt-body {
	padding: 16px;
	max-height: 380px;
	overflow-y: auto;
	font-size: .875rem;
	line-height: 1.75;
	color: var(--prl-ink);
	overflow-wrap: break-word;
}

/* Emphasised technical terms inside the prompt */
.prl .prl-hl {
	color: var(--prl-accent);
	font-style: italic;
}

/* Prompt actions
   ========================================================================== */
.prl-prompt-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.prl .prl-copy,
.prl .prl-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: transform .16s ease, background-color .16s ease, color .16s ease;
}

/* Copy is the primary action on the page, so it takes the ink-filled pill and
   all the leftover width. */
.prl .prl-copy {
	flex: 1;
	color: var(--prl-btn-text);
	background: var(--prl-btn);
}
.prl .prl-copy:hover { transform: translateY(-1px); }
.prl .prl-copy.is-done { background: #128a63; }

.prl .prl-share {
	color: var(--prl-ink);
	background: none;
	border-color: var(--prl-line);
}
.prl .prl-share:hover { transform: translateY(-1px); border-color: var(--prl-accent); color: var(--prl-accent); }

/* Specs
   ========================================================================== */
.prl-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--prl-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--prl-line);
}

.prl-spec {
	margin: 0;
	padding: 13px 15px;
	background: var(--prl-panel);
	backdrop-filter: blur(1px);
}

.prl-specs dt {
	margin: 0 0 5px;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--prl-muted);
}

.prl-specs dd {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--prl-ink);
	overflow-wrap: break-word;
}

.prl-spec-note {
	margin-left: 5px;
	font-size: .82rem;
	font-weight: 400;
	font-style: italic;
	color: var(--prl-accent);
}

/* Focus, motion, dark
   ========================================================================== */
.prl :focus-visible {
	outline: 2px solid var(--prl-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.prl-dark {
	--prl-ink:   #eef1f6;
	--prl-muted: rgba(238, 241, 246, .62);
	--prl-line:  rgba(255, 255, 255, .14);
	--prl-panel: rgba(255, 255, 255, .045);
	--prl-btn:      #eef1f6;
	--prl-btn-text: #14171d;
}

@media (prefers-reduced-motion: reduce) {
	.prl * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Responsive
   ========================================================================== */
@media (max-width: 860px) {
	.prl-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.prl-img-right .prl-visual { order: 0; }
	.prl-prompt-body { max-height: 300px; }
}

@media (max-width: 480px) {
	.prl-prompt-actions { flex-direction: column; align-items: stretch; }
	.prl .prl-share { width: 100%; }
}