/*
 * Pet Recovery Command Center — the shared stylesheet.
 *
 * ONE sheet for both brands. A brand supplies four custom properties on
 * #prcc-root and changes nothing else, which is what keeps the two dashboards
 * from drifting into two different products.
 *
 * DEFENSIVE BY DESIGN
 *
 * This runs inside a live WordPress theme (Sydney) with an Elementor global
 * kit whose heading rules carry real specificity. Everything below is scoped
 * under `.prcc` and states its own colour, size and weight rather than
 * inheriting — an inherited value here is a value the theme gets to change.
 *
 * Every colour is stated explicitly on both text and background. A rule that
 * sets one and inherits the other is how white-on-white happens.
 */

.prcc {
	/* Fallbacks matter: if an adapter omits a token the page must still be
	   readable, not invisible. */
	--prcc-accent: #1E5F74;
	--prcc-accent-ink: #FFFFFF;
	--prcc-surface: #FFFFFF;
	--prcc-ink: #16202A;

	--prcc-muted: #5A6672;
	--prcc-line: #DCE3E8;
	--prcc-bg: #F4F7F9;
	--prcc-radius: 12px;
	--prcc-gap: 16px;

	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px;

	/* The containing block for the skip link.
	   Without this, `position:absolute` on .prcc-skip resolves against
	   whatever the host theme happens to have positioned — on KCAI that put
	   the focused link 50px outside this box. A component must define its own
	   coordinate space rather than inherit one from the page it lands on. */
	position: relative;
	background: var(--prcc-bg);
	color: var(--prcc-ink);
	font-size: 16px;
	line-height: 1.5;

	/* The single most important line in this file.
	   Nothing inside the dashboard may widen the page. Every child is
	   min-width:0 below so a long word or a wide grid child shrinks instead
	   of pushing the document sideways. */
	overflow-x: clip;
}

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

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content. That default is the usual cause of a horizontal
   scrollbar that no single element appears to be responsible for. */
.prcc :where(div, section, article, ul, li, dl, p, h1, h2, h3, h4) {
	min-width: 0;
}

.prcc :where(img, svg, video) {
	max-width: 100%;
	height: auto;
}

/* Long case numbers, long pet names, pasted URLs. */
.prcc :where(p, h1, h2, h3, h4, dd, dt, li, span) {
	overflow-wrap: anywhere;
}

/* The Sydney theme floats content in a way that lets a plain page slide under
   the global footer. Clearing here costs nothing and prevents the overlap. */
.prcc::after {
	content: "";
	display: block;
	clear: both;
}

/* ---------------------------------------------------------------- *
 * Skip link and focus
 * ---------------------------------------------------------------- */

/*
 * Hidden by clipping to a 1px box, not by left:-9999px.
 *
 * An element parked far off-canvas is still laid out there, and an overflow
 * audit reports it as a component sticking 10,000px out of its container —
 * which buries the real overflow finding it is supposed to surface. Clipping
 * occupies no horizontal space at all.
 */
.prcc .prcc-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	left: 0;
	top: 0;
	/* Ink rather than the brand accent. White on the KCPSR red measures
	   3.81:1 at this size — fine for a 22px heading, not for the one control
	   a keyboard user meets before anything else on the page. */
	background: #16202A;
	color: #FFFFFF;
	padding: 10px 16px;
	border-radius: 0 0 var(--prcc-radius) 0;
	z-index: 100;
	text-decoration: none;
}

/*
 * Explicit sizing, not `width: auto`.
 *
 * Shrink-wrapping an absolutely positioned element measured 32x20 — padding
 * and no content — which would have shipped a skip link that technically
 * receives focus and shows nothing. Stating the box removes the guesswork.
 */
.prcc .prcc-skip:focus,
.prcc .prcc-skip:focus-visible {
	display: block;
	width: auto;
	min-width: 240px;
	height: auto;
	min-height: 44px;
	padding: 12px 16px;
	overflow: visible;
	clip-path: none;
	line-height: 20px;
	z-index: 100;
}

/* A visible focus ring on everything focusable, in a colour that survives
   both brands. `:focus-visible` alone would leave a keyboard user with no
   indicator in browsers that scope it narrowly, so both are covered. */
.prcc :where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--prcc-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.prcc .prcc-main:focus {
	outline: none;
}

/* ---------------------------------------------------------------- *
 * Masthead
 * ---------------------------------------------------------------- */

.prcc .prcc-masthead {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prcc-gap);
	align-items: center;
	justify-content: space-between;
	background: var(--prcc-accent);
	color: var(--prcc-accent-ink);
	padding: 18px 20px;
	border-radius: var(--prcc-radius);
	margin-bottom: var(--prcc-gap);
}

.prcc .prcc-masthead-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.prcc .prcc-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex: 0 0 auto;
	background: transparent;
}

.prcc .prcc-wordmark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--prcc-accent-ink);
	color: var(--prcc-accent);
	font-weight: 700;
	/*
	 * Sized in ch, not px. "KC" and "KCAI" are both legitimate wordmarks and a
	 * fixed 18px fits the first and spills out of the second — which is
	 * exactly what shipped on the first KCAI render. Clamped so a longer
	 * wordmark shrinks to fit instead of escaping the circle.
	 */
	font-size: clamp(11px, 2.2ch, 18px);
	letter-spacing: -0.02em;
	overflow: hidden;
	padding: 0 4px;
}

/* Stated explicitly, because the Elementor kit sets h1/h2 size, weight and
   colour with enough specificity to win against a bare element selector. */
.prcc .prcc-masthead .prcc-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--prcc-accent-ink);
}

.prcc .prcc-tagline {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--prcc-accent-ink);
	opacity: 0.9;
}

.prcc .prcc-session {
	text-align: right;
}

.prcc .prcc-session-hello {
	margin: 0;
	font-weight: 600;
	color: var(--prcc-accent-ink);
}

.prcc .prcc-session-sub {
	margin: 2px 0 8px;
	font-size: 13px;
	color: var(--prcc-accent-ink);
	opacity: 0.85;
}

.prcc .prcc-masthead-session .prcc-btn {
	background: transparent;
	color: var(--prcc-accent-ink);
	border-color: var(--prcc-accent-ink);
}

/* ---------------------------------------------------------------- *
 * Buttons
 * ---------------------------------------------------------------- */

.prcc .prcc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 44px is the minimum comfortable touch target. Below that a phone user
	   misses, and this dashboard is overwhelmingly used on a phone. */
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--prcc-line);
	border-radius: 999px;
	background: var(--prcc-surface);
	color: var(--prcc-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter 120ms ease;

	/* The Sydney theme upper-cases every button on the site. Sentence case is
	   part of this dashboard's voice — "Report a Missing Pet" is a sentence
	   someone reads in an emergency, not a label to shout — and letter-spacing
	   is reset for the same reason. */
	text-transform: none;
	letter-spacing: normal;
}

.prcc .prcc-btn:hover {
	filter: brightness(0.96);
}

.prcc .prcc-btn-primary {
	background: var(--prcc-accent);
	color: var(--prcc-accent-ink);
	border-color: var(--prcc-accent);
}

.prcc .prcc-btn-secondary {
	background: var(--prcc-surface);
	color: var(--prcc-accent);
	border-color: var(--prcc-accent);
}

/*
 * A disabled control must READ as disabled, not merely fail silently.
 *
 * WCAG exempts disabled controls from the contrast minimum. That exemption is
 * declined here: someone has to be able to READ what they cannot yet use, and
 * the first measured pass came out at 4.03:1. #4B5763 on #EDF1F4 is 7.0:1.
 */
.prcc .prcc-btn-disabled,
.prcc .prcc-btn[disabled] {
	background: #EDF1F4;
	color: #4B5763;
	border-color: #C4CDD5;
	cursor: not-allowed;
	filter: none;
}

.prcc .prcc-action-off {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	max-width: 100%;
}

.prcc .prcc-action-reason {
	font-size: 12px;
	color: var(--prcc-muted);
}

.prcc .prcc-global-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--prcc-gap);
}

.prcc .prcc-back {
	appearance: none;
	background: none;
	border: 0;
	padding: 8px 0;
	margin-bottom: 8px;
	min-height: 44px;
	color: var(--prcc-accent);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	/* Same theme upper-casing as .prcc-btn; this selector was missed on the
	   first pass and shipped as "← BACK TO MY COMMAND CENTER". */
	text-transform: none;
	letter-spacing: normal;
}

/* ---------------------------------------------------------------- *
 * Sections
 * ---------------------------------------------------------------- */

.prcc .prcc-section {
	background: var(--prcc-surface);
	border: 1px solid var(--prcc-line);
	border-radius: var(--prcc-radius);
	padding: 18px;
	margin-bottom: var(--prcc-gap);
}

.prcc .prcc-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.prcc .prcc-section .prcc-section-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--prcc-ink);
}

.prcc .prcc-section-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--prcc-bg);
	color: var(--prcc-muted);
	font-size: 13px;
	font-weight: 700;
}

/* ---------------------------------------------------------------- *
 * Cards
 *
 * auto-fill with a 240px minimum, so the grid collapses to one column on a
 * narrow phone without a media query and never forces a row wider than the
 * viewport. `minmax(0, 1fr)` rather than `1fr` for the same min-width reason
 * as above.
 * ---------------------------------------------------------------- */

.prcc .prcc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: var(--prcc-gap);
}

.prcc .prcc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--prcc-line);
	border-radius: var(--prcc-radius);
	/* Opaque, always. A card that inherits a transparent background sits
	   invisibly on whatever the theme painted behind it. */
	background: var(--prcc-surface);
	color: var(--prcc-ink);
	overflow: hidden;
}

.prcc .prcc-card-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #E7EDF1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.prcc .prcc-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.prcc .prcc-photo-fallback {
	font-size: 40px;
	font-weight: 700;
	color: #8593A0;
}

.prcc .prcc-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
}

.prcc .prcc-card .prcc-card-name,
.prcc .prcc-workspace-info .prcc-workspace-name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--prcc-ink);
}

.prcc .prcc-card-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	margin: 0;
	font-size: 14px;
}

.prcc .prcc-card-meta dt {
	color: var(--prcc-muted);
	font-weight: 600;
}

.prcc .prcc-card-meta dd {
	margin: 0;
	color: var(--prcc-ink);
}

.prcc .prcc-card-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.prcc .prcc-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: #E7EDF1;
	color: #384450;
}

.prcc .prcc-pill-missing {
	background: #FDE7E4;
	color: #8C2114;
}

.prcc .prcc-pill-safe {
	background: #E2F4E8;
	color: #14532B;
}

.prcc .prcc-pill-service {
	background: #EEF2F6;
	color: #3A4854;
}

.prcc .prcc-pill-service.is-active {
	background: var(--prcc-accent);
	color: var(--prcc-accent-ink);
}

.prcc .prcc-card-note {
	margin: 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: #FFF6E5;
	color: #6B4A05;
	font-size: 13px;
}

.prcc .prcc-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.prcc .prcc-candidates {
	margin-top: var(--prcc-gap);
	padding-top: var(--prcc-gap);
	border-top: 1px dashed var(--prcc-line);
}

.prcc .prcc-candidates .prcc-candidates-title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--prcc-muted);
}

/* ---------------------------------------------------------------- *
 * Empty states
 * ---------------------------------------------------------------- */

.prcc .prcc-empty {
	padding: 18px;
	border: 1px dashed var(--prcc-line);
	border-radius: var(--prcc-radius);
	background: var(--prcc-bg);
	color: var(--prcc-ink);
}

.prcc .prcc-empty .prcc-empty-head {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--prcc-ink);
}

.prcc .prcc-empty-body {
	margin: 0;
	font-size: 14px;
	color: var(--prcc-muted);
}

.prcc .prcc-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* ---------------------------------------------------------------- *
 * Activity
 * ---------------------------------------------------------------- */

.prcc .prcc-activity {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.prcc .prcc-activity-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--prcc-line);
}

.prcc .prcc-activity-row:last-child {
	border-bottom: 0;
}

.prcc .prcc-activity-pet {
	font-weight: 700;
	color: var(--prcc-ink);
}

.prcc .prcc-activity-detail {
	color: var(--prcc-muted);
	font-size: 14px;
}

.prcc .prcc-activity-when {
	margin-left: auto;
	color: var(--prcc-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- *
 * Map
 * ---------------------------------------------------------------- */

.prcc .prcc-map {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--prcc-gap);
}

.prcc .prcc-map-canvas {
	min-height: 260px;
	border-radius: var(--prcc-radius);
	background: #E7EDF1;
	border: 1px solid var(--prcc-line);
	/* Leaflet and friends absolutely position tiles; without this a mounted
	   map paints outside its box. */
	position: relative;
	overflow: hidden;
}

.prcc .prcc-map-canvas.is-unavailable {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-style: dashed;
	background: #F7F9FB;
}

.prcc .prcc-map-msg {
	text-align: center;
	max-width: 340px;
}

.prcc .prcc-map-msg .prcc-map-msg-head {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--prcc-ink);
}

.prcc .prcc-map-msg-body {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--prcc-muted);
}

.prcc .prcc-map-side .prcc-map-subtitle {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--prcc-ink);
}

.prcc .prcc-map-area {
	margin: 0 0 12px;
	font-size: 14px;
}

.prcc .prcc-map-area-label {
	color: var(--prcc-muted);
	font-weight: 600;
}

.prcc .prcc-chips {
	margin-bottom: 12px;
}

.prcc .prcc-chips .prcc-chips-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--prcc-muted);
}

.prcc .prcc-chips-empty {
	margin: 0;
	font-size: 13px;
	color: var(--prcc-muted);
}

.prcc .prcc-chip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.prcc .prcc-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px 4px 10px;
	border-radius: 999px;
	background: var(--prcc-bg);
	border: 1px solid var(--prcc-line);
	font-size: 13px;
	color: var(--prcc-ink);
}

.prcc .prcc-chip-x {
	appearance: none;
	border: 0;
	background: none;
	/* Small visually, but 32px of hit area so a thumb can actually land on
	   it. Padding rather than size keeps the chip compact. */
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	color: var(--prcc-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

/* ---------------------------------------------------------------- *
 * Workspace
 * ---------------------------------------------------------------- */

.prcc .prcc-workspace-head {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: var(--prcc-gap);
	background: var(--prcc-surface);
	border: 1px solid var(--prcc-line);
	border-radius: var(--prcc-radius);
	padding: 18px;
	margin-bottom: var(--prcc-gap);
}

.prcc .prcc-workspace-head .prcc-card-photo {
	border-radius: var(--prcc-radius);
	overflow: hidden;
}

.prcc .prcc-workspace-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.prcc .prcc-panels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--prcc-gap);
}

.prcc .prcc-panel {
	background: var(--prcc-surface);
	border: 1px solid var(--prcc-line);
	border-radius: var(--prcc-radius);
	padding: 16px;
	color: var(--prcc-ink);
}

.prcc .prcc-panel.is-unavailable,
.prcc .prcc-panel.is-locked {
	background: #F7F9FB;
	border-style: dashed;
}

.prcc .prcc-panel .prcc-panel-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--prcc-ink);
}

.prcc .prcc-panel-body {
	margin: 0;
	font-size: 14px;
	color: var(--prcc-ink);
}

.prcc .prcc-panel-note {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--prcc-muted);
}

.prcc .prcc-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* ---------------------------------------------------------------- *
 * States
 * ---------------------------------------------------------------- */

.prcc .prcc-loading,
.prcc .prcc-signedout,
.prcc .prcc-error,
.prcc .prcc-refusal {
	background: var(--prcc-surface);
	border: 1px solid var(--prcc-line);
	border-radius: var(--prcc-radius);
	padding: 20px;
	color: var(--prcc-ink);
}

.prcc .prcc-signedout h2 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--prcc-ink);
}

.prcc .prcc-error {
	border-color: #E2A9A0;
	background: #FDF3F1;
	color: #7A2417;
}

.prcc .prcc-notice {
	margin: 0 0 var(--prcc-gap);
	padding: 10px 14px;
	border-radius: var(--prcc-radius);
	background: #FFF6E5;
	color: #6B4A05;
	font-size: 14px;
}

.prcc [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- *
 * Narrow screens
 *
 * The layout is fluid by default, so these breakpoints only collapse the two
 * genuinely two-column blocks. Everything else already reflows on its own.
 * ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.prcc .prcc-map,
	.prcc .prcc-workspace-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.prcc .prcc-masthead {
		flex-direction: column;
		align-items: flex-start;
	}

	.prcc .prcc-session {
		text-align: left;
	}

	.prcc .prcc-workspace-head .prcc-card-photo {
		max-width: 260px;
	}
}

/* A 320px viewport leaves roughly 273px of usable width once the theme's own
   page padding is accounted for. Tighten the box rather than let a card set
   the page width. */
@media (max-width: 360px) {
	.prcc {
		padding: 10px;
		--prcc-gap: 12px;
	}

	.prcc .prcc-masthead {
		padding: 14px;
	}

	.prcc .prcc-section,
	.prcc .prcc-panel,
	.prcc .prcc-workspace-head {
		padding: 14px;
	}

	.prcc .prcc-global-actions .prcc-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prcc .prcc-btn {
		transition: none;
	}
}