/* ============================================================================
   Lost pet poster maker — /lost-pet-poster-maker/ (page 189)
   ----------------------------------------------------------------------------
   Loaded only on that page, from rga-layer.php. Nothing here is gated by
   psc_lostpet_active(), so none of the site's existing @media print blocks are
   emitted on this URL — verified: the page ships 0 of them. That means this
   file owns print outright and needs no defensive scoping.

   Units are px on purpose: Advanced Themer sets html{font-size:62.5%} sitewide,
   so rem would render everything at 62.5%. Same rule as rga.css:37.

   NAME COLLISION, DO NOT REINTRODUCE: the shared block in psc-lostpet.php sets
   `.psc-preview { display:none !important }` inside @media print. Naming the
   live preview `.psc-preview` would silently drop the poster from print output
   on any page where that block loads. Preview is `.pp-canvas` here.
   ========================================================================== */

.psc-poster {
	--pp-sig:    #C8102E;   /* one red. matches page 64 + the guides */
	--pp-ink:    #1B1B1B;
	--pp-body:   #3F3F3F;
	--pp-mute:   #5A5A5A;
	--pp-line:   #D8D3CB;
	--pp-chip:   #ECE9E1;
	--pp-field:  #F7F6F5;
	--pp-ok:     #262626;
	--pp-font:   "Public Sans", "Helvetica Neue", Arial, sans-serif;
	display: block;
	width: 100%;
	max-width: 1080px;
	font-family: var(--pp-font);
}

/* ---- layout ---------------------------------------------------------------
   Mobile puts the poster FIRST: someone typing needs to see the thing change.
   Desktop goes form-left / sticky-stage-right. */
.pp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 44px;
	align-items: start;
}
.pp-stage { order: 1; min-width: 0; }
.pp-form  { order: 2; min-width: 0; }

@media (min-width: 900px) {
	.pp-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
	.pp-form  { order: 1; }
	.pp-stage { order: 2; position: sticky; top: 108px; }
}

/* ---- the preview ----------------------------------------------------------
   Fixed 1275x1650 backing store, CSS scales it. One coordinate grid for
   preview and export means they cannot drift apart, and it lets us drop the
   resize listener entirely (iOS fires resize on every URL-bar move). */
.pp-canvas-wrap {
	position: relative;
	background: var(--pp-field);
	border: 1px solid var(--pp-line);
	padding: 14px;
}
.pp-canvas {
	display: block;
	width: 100%;
	height: auto;
	max-height: 62vh;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0,0,0,.18);
	touch-action: none;          /* we own the drag for photo panning */
	cursor: grab;
}
.pp-canvas.is-dragging { cursor: grabbing; }
.pp-canvas:focus-visible { outline: 3px solid var(--pp-sig); outline-offset: 3px; }
@media (min-width: 900px) { .pp-canvas { max-height: none; } }

.pp-stage-note {
	margin: 10px 0 0;
	font: 400 13px/1.5 var(--pp-font);
	color: var(--pp-mute);
}

/* ---- fields ---------------------------------------------------------------- */
.pp-fieldset { border: 0; margin: 0 0 26px; padding: 0; }
.pp-legend {
	display: block; width: fit-content; padding: 4px 10px; margin: 0 0 14px;
	background: var(--pp-chip); color: #3F3F3F;
	font: 700 11px/15px var(--pp-font); letter-spacing: 1px; text-transform: uppercase;
}
.pp-field { margin: 0 0 20px; }
.pp-label {
	display: block; margin: 0 0 6px; color: #000;
	font: 700 15px/1.35 var(--pp-font);
}
.pp-label .pp-opt { color: var(--pp-mute); font-weight: 400; }
.pp-hint {
	display: block; margin: 0 0 8px;
	font: 400 13px/1.5 var(--pp-font); color: var(--pp-mute);
}
.pp-input {
	display: block; width: 100%; box-sizing: border-box;
	min-height: 48px; padding: 12px 14px; margin: 0;
	background: #fff; border: 1px solid var(--pp-line); border-radius: 0;
	font: 300 16px/24px var(--pp-font); color: var(--pp-ink);
	/* 16px minimum, or iOS Safari zooms the viewport on focus */
}
.pp-input::placeholder { color: #6B6B6B; }
.pp-input:focus-visible {
	border-color: var(--pp-ink);
	outline: 3px solid var(--pp-sig); outline-offset: 2px;
}
.pp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pp-count {
	flex: none; font: 400 12px/16px var(--pp-font); color: var(--pp-mute);
	font-variant-numeric: tabular-nums;
}
.pp-count.is-full { color: var(--pp-sig); font-weight: 700; }

.pp-warn {
	display: none; margin: 8px 0 0; padding: 10px 12px;
	background: #FDF3F4; border-left: 3px solid var(--pp-sig);
	font: 400 13px/1.5 var(--pp-font); color: var(--pp-ink);
}
.pp-warn.is-on { display: block; }

/* ---- segmented control (lost/found, species) ------------------------------- */
.pp-seg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--pp-line); background: #fff; }
.pp-seg > * { flex: 1 1 0; min-width: 84px; }
.pp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pp-seg label {
	display: flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 10px 12px; cursor: pointer;
	border-left: 1px solid var(--pp-line);
	font: 700 14px/1.2 var(--pp-font); letter-spacing: .5px; text-transform: uppercase;
	color: var(--pp-body); background: #fff;
	transition: background .15s, color .15s;
}
.pp-seg > *:first-child label { border-left: 0; }
.pp-seg label:hover { background: var(--pp-field); }
.pp-seg input:checked + label { background: var(--pp-ink); color: #fff; }
.pp-seg input:focus-visible + label { outline: 3px solid var(--pp-sig); outline-offset: -3px; }

/* ---- photo well ------------------------------------------------------------
   Reuses the .rga-card-media idea from rga.css:370 — aspect box, tinted
   placeholder, overflow hidden. */
.pp-photo { margin: 0 0 12px; }
.pp-drop {
	position: relative; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 8px;
	aspect-ratio: 3 / 2; width: 100%;
	background: var(--pp-field);
	border: 2px dashed var(--pp-line);
	cursor: pointer; text-align: center; padding: 16px;
	transition: border-color .15s, background .15s;
}
.pp-drop:hover, .pp-drop.is-over { border-color: var(--pp-sig); background: #fff; }
.pp-drop input[type="file"] {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; cursor: pointer;
}
.pp-drop input[type="file"]:focus-visible { outline: 3px solid var(--pp-sig); outline-offset: 2px; }
.pp-drop__big { font: 700 16px/1.3 var(--pp-font); color: #000; }
.pp-drop__sm  { font: 400 13px/1.5 var(--pp-font); color: var(--pp-mute); max-width: 32ch; }
.pp-drop.has-photo { aspect-ratio: auto; padding: 12px; border-style: solid; background: #fff; }

.pp-zoom { display: none; align-items: center; gap: 12px; margin: 12px 0 0; }
.pp-zoom.is-on { display: flex; }
.pp-zoom label { flex: none; font: 700 12px/16px var(--pp-font); letter-spacing: 1px; text-transform: uppercase; color: var(--pp-mute); }
.pp-zoom input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--pp-sig); height: 44px; }
.pp-zoom button {
	flex: none; min-height: 44px; padding: 8px 14px; cursor: pointer;
	background: none; border: 1px solid var(--pp-line);
	font: 700 13px/1.2 var(--pp-font); color: var(--pp-body);
}
.pp-zoom button:hover { background: var(--pp-field); }

/* ---- checkbox --------------------------------------------------------------
   Same 22px / 6px-radius device the checklist uses, so the two tools feel
   like one product. */
.pp-check { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; padding: 6px 0; }
.pp-check input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: none; box-sizing: border-box; padding: 0;
	width: 22px; height: 22px; margin: 1px 0 0;
	border: 2px solid rgba(38,38,38,.28); border-radius: 6px; background: #fff;
	cursor: pointer; transition: background-color .15s, border-color .15s;
}
.pp-check input[type="checkbox"]:hover { border-color: rgba(38,38,38,.55); }
.pp-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--pp-sig); outline-offset: 2px; }
.pp-check input[type="checkbox"]:checked {
	background-color: var(--pp-sig); border-color: var(--pp-sig);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.2 L9.4 14.6 L16 7.6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 22px 22px; background-repeat: no-repeat; background-position: center;
}
.pp-check__t { font: 400 15px/1.45 var(--pp-font); color: var(--pp-ink); }
.pp-check__t b { display: block; font-weight: 700; color: #000; }

/* ---- actions ---------------------------------------------------------------
   Geometry matches .rga-btn (10px 38px, 16/700, ls 1px) so the tool's controls
   read as the same family as the rest of the site. */
.pp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.pp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 10px 26px; cursor: pointer;
	border: 1px solid var(--pp-ink); border-radius: 0; background: none;
	font: 700 16px/24px var(--pp-font); letter-spacing: 1px; color: #000;
	transition: background .2s, color .2s, border-color .2s;
}
.pp-btn:hover { background: var(--pp-ink); color: #fff; }
.pp-btn:focus-visible { outline: 3px solid var(--pp-sig); outline-offset: 3px; }
.pp-btn--go { background: var(--pp-sig); border-color: var(--pp-sig); color: #fff; }
.pp-btn--go:hover { background: #A50D26; border-color: #A50D26; color: #fff; }
.pp-btn[hidden] { display: none; }
.pp-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) { .pp-actions .pp-btn { flex: 1 1 100%; } }

.pp-help { margin: 4px 0 0; font: 400 13px/1.55 var(--pp-font); color: var(--pp-mute); }
.pp-help b { color: var(--pp-ink); }

/* ---- in-app browser banner + long-press save ------------------------------ */
.pp-banner {
	display: none; margin: 0 0 20px; padding: 14px 16px;
	background: var(--pp-ink); color: #fff;
	border-left: 6px solid var(--pp-sig);
	font: 400 14px/1.55 var(--pp-font);
}
.pp-banner.is-on { display: block; }
.pp-banner b { display: block; font-weight: 700; margin-bottom: 4px; }

.pp-saveimg { display: none; margin: 20px 0 0; }
.pp-saveimg.is-on { display: block; }
.pp-saveimg img {
	display: block; width: 100%; max-width: 340px; height: auto;
	border: 1px solid var(--pp-line); margin: 0 0 10px;
}

/* ---- screening card -------------------------------------------------------- */
.pp-screen {
	margin: 26px 0 0; padding: 22px 24px 24px;
	background: var(--pp-ink); border-left: 6px solid var(--pp-sig);
}
.pp-screen__k {
	display: block; margin: 0 0 10px; color: #F4677A;
	font: 700 12px/16px var(--pp-font); letter-spacing: 1px; text-transform: uppercase;
}
.pp-screen__t { margin: 0 0 10px; color: #fff; font: 700 20px/1.2 var(--pp-font); }
.pp-screen p { margin: 0 0 12px; color: rgba(255,255,255,.82); font: 300 15px/1.6 var(--pp-font); }
.pp-screen .pp-input { background: #fff; }
.pp-screen__out { display: none; margin: 12px 0 0; color: #fff; font: 400 15px/1.6 var(--pp-font); }
.pp-screen__out.is-on { display: block; }
.pp-screen__out b { color: #F4677A; }

/* ---- next steps (the half of the product that isn't the file) -------------- */
.pp-next { margin: 30px 0 0; border: 1px solid var(--pp-line); background: #fff; }
.pp-next__h {
	margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--pp-line);
	font: 700 16px/1.3 var(--pp-font); color: #000;
}
.pp-next ol { margin: 0; padding: 8px 24px 20px 24px; }
.pp-next li {
	margin: 0; padding: 12px 0 12px 4px; border-top: 1px solid rgba(0,0,0,.08);
	font: 400 15px/1.55 var(--pp-font); color: var(--pp-ink);
}
.pp-next li:first-child { border-top: 0; }
.pp-next li b { color: #000; }
.pp-next a { color: var(--pp-sig); text-decoration: underline; text-underline-offset: 3px; }

/* ---- status + screen-reader mirror ----------------------------------------- */
.pp-status { margin: 10px 0 0; min-height: 20px; font: 700 13px/20px var(--pp-font); color: var(--pp-sig); }
.pp-vh {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- no-JS ----------------------------------------------------------------- */
.pp-nojs { border: 1px solid var(--pp-line); background: #fff; padding: 24px; }
.pp-nojs h2 { margin: 0 0 10px; font: 700 20px/1.25 var(--pp-font); color: #000; }
.pp-nojs p { margin: 0 0 14px; font: 300 16px/1.6 var(--pp-font); color: var(--pp-body); }

/* ============================ PRINT =========================================
   This page emits no other print CSS, so these rules stand alone.
   #psc-printroot is created by script as a direct child of <body> — Bricks
   nests page content inside #brx-content, so `body > *:not(...)` only works
   if the print root is a sibling of that wrapper.
   ========================================================================== */
#psc-printroot { display: none; }

@media print {
	/* Helps Chromium pick the paper; WebKit ignores @page size entirely and
	   takes paper from the OS dialog, which is why the artwork below is sized
	   in absolute inches that fit inside BOTH Letter and A4 printable areas. */
	@page { size: 8.5in 11in; margin: 0.25in; }

	html, body {
		margin: 0 !important; padding: 0 !important;
		background: #fff !important;
	}
	body > *:not(#psc-printroot) { display: none !important; }

	#psc-printroot {
		display: flex !important;
		width: 7.7in; height: 9.97in;   /* fits Letter and A4; 2550px => 331 dpi */
		margin: 0 auto; padding: 0; overflow: hidden;
		align-items: center; justify-content: center;
		break-inside: avoid; page-break-inside: avoid;
	}
	#psc-printroot img {
		display: block; max-width: 100%; max-height: 100%;
		width: auto; height: auto;
	}
}

/* ---- progressive enhancement gate -----------------------------------------
   The canvas is inert without JS, so rather than showing a dead form we show
   the blank-template fallback instead and swap once the script says it is
   live. Honest degradation beats a form with no output. */
.psc-poster .pp-grid,
.psc-poster .pp-screen { display: none; }
.psc-poster.is-live .pp-grid { display: grid; }
.psc-poster.is-live .pp-screen { display: block; }
.psc-poster.is-live .pp-nojs { display: none; }