/*
 * Kansas City AI Pet Matching System — visual identity.
 *
 * SCOPE. Every rule below is scoped under `.kcpsr-am`, with the two exceptions
 * at the top of the file, which are scoped to `body.kcpsr-am-page` and exist to
 * fix a theme layout collision on this plugin's own pages. Nothing here can
 * reach an element on any other page of kcpetsearchandrescue.com. The site's
 * global colours, header, footer and typography are untouched.
 *
 * SPECIFICITY. The Elementor kit stylesheet carries rules like
 * `.elementor-kit-379 h2 { color: #fff }` at (0,1,1). A bare `.kcpsr-am h2` ties
 * at (0,1,1) and loses on load order, which is how headings end up invisible
 * white-on-white. Every heading rule here is therefore prefixed with `body`,
 * putting it at (0,1,2) and winning cleanly — without a single !important.
 *
 * BREAKPOINTS match the site's Elementor breakpoints so this system reflows at
 * the same widths as everything else: mobile <=750, tablet 751-1023,
 * desktop >=1024.
 */

/* ===================================================================== *
 * Theme layout fix, scoped to this plugin's pages only
 * ===================================================================== */

/*
 * Sydney puts page content in a floated #primary whose sibling is the global
 * Elementor footer with clear:none. The uncleared float gives the wrapper no
 * height in flow, so the footer paints its opaque background over the content
 * and the page looks blank. Taking #primary out of the float fixes it. Scoped
 * by body class, so no other page's layout can change.
 */
body.kcpsr-am-page #primary,
body.kcpsr-am-page .content-area {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

body.kcpsr-am-page #content,
body.kcpsr-am-page .site-content {
	padding: 0;
	background: #08080a;
}

body.kcpsr-am-page .entry-header,
body.kcpsr-am-page .page-header,
body.kcpsr-am-page .entry-title {
	display: none;
}

/* ===================================================================== *
 * Tokens
 * ===================================================================== */

.kcpsr-am {
	/* Surfaces — jet black, then three lifts. Not grey; genuinely near-black. */
	--am-bg:        #08080a;
	--am-panel:     #101014;
	--am-panel-2:   #16161c;
	--am-raised:    #1d1d25;

	/* Lines. Low contrast by default; the glow is the emphasis, not the border. */
	--am-line:      #26262f;
	--am-line-soft: #1c1c23;

	/* Text */
	--am-text:      #ecedf2;
	--am-text-2:    #a3a4b2;
	--am-text-3:    #6f7080;

	/* The thermal ramp. Ordered cold to hot, and used that way throughout:
	   violet and blue read as information, amber as attention, orange as the
	   primary action, red as a conflict or a stop. */
	--am-violet:    #8b6ef0;
	--am-blue:      #3d9bf5;
	--am-cyan:      #35c6d6;
	--am-amber:     #ffb020;
	--am-orange:    #ff7a1a;
	--am-red:       #f0473e;
	--am-green:     #2fbf71;

	--am-orange-dim: rgba(255, 122, 26, 0.14);
	--am-blue-dim:   rgba(61, 155, 245, 0.14);
	--am-red-dim:    rgba(240, 71, 62, 0.13);
	--am-green-dim:  rgba(47, 191, 113, 0.13);
	--am-amber-dim:  rgba(255, 176, 32, 0.13);
	--am-violet-dim: rgba(139, 110, 240, 0.14);

	--am-radius:    14px;
	--am-radius-sm: 9px;
	--am-shadow:    0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.42);

	--am-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--am-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	background: var(--am-bg);
	color: var(--am-text);
	font-family: var(--am-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	/* A page-wide containing block for the ambient glows below. */
	position: relative;
	overflow-x: clip;
}

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

.kcpsr-am-wrap {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 22px;
}

.kcpsr-am-wrap--narrow { max-width: 780px; }

/* ===================================================================== *
 * Form-control reset
 *
 * THE TRAP THIS EXISTS FOR, stated plainly because it is invisible until you
 * look at a screenshot: the Elementor kit stylesheet carries
 *
 *     .elementor-kit-379 button { font-family: ...; text-transform: uppercase }
 *
 * at specificity (0,1,1), and the Sydney theme adds a bare
 * `button { text-transform: uppercase }`. A component rule written as
 * `.kcpsr-am-choice { font: inherit }` is only (0,1,0) and LOSES to the kit —
 * so every button in this system rendered in Roboto and in SHOUTING CAPITALS,
 * including the three big entry choices and their body copy.
 *
 * The fix is the same one the headings above need: prefix with `body` to reach
 * (0,1,2) and win cleanly. No !important anywhere — an !important here would be
 * impossible for a future stylesheet to override legitimately.
 * ===================================================================== */

body .kcpsr-am button,
body .kcpsr-am input,
body .kcpsr-am select,
body .kcpsr-am textarea,
body .kcpsr-am optgroup {
	font-family: var(--am-font);
	text-transform: none;
	letter-spacing: normal;
}

/* The places uppercase IS deliberate. Re-asserted after the reset above, and
   at the same `body` depth so the order in this file is what decides. */
body .kcpsr-am .kcpsr-am-btn,
body .kcpsr-am .kcpsr-am-seg button,
body .kcpsr-am .kcpsr-am-choice,
body .kcpsr-am .kcpsr-am-choice__title,
body .kcpsr-am .kcpsr-am-choice__note {
	text-transform: none;
}

/* ===================================================================== *
 * Typography
 * ===================================================================== */

body .kcpsr-am h1,
body .kcpsr-am h2,
body .kcpsr-am h3,
body .kcpsr-am h4 {
	font-family: var(--am-font);
	color: var(--am-text);
	margin: 0 0 0.5em;
	letter-spacing: -0.018em;
	line-height: 1.14;
	font-weight: 750;
	text-transform: none;
}

body .kcpsr-am h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); }
body .kcpsr-am h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
body .kcpsr-am h3 { font-size: clamp(1.12rem, 2.1vw, 1.4rem); font-weight: 700; }
body .kcpsr-am h4 { font-size: 1rem; font-weight: 700; }

body .kcpsr-am p { margin: 0 0 1rem; color: var(--am-text-2); }
body .kcpsr-am p.am-lede {
	font-size: clamp(1.05rem, 2.1vw, 1.28rem);
	color: var(--am-text);
	line-height: 1.52;
	max-width: 62ch;
}

body .kcpsr-am a { color: var(--am-orange); text-decoration: none; }
body .kcpsr-am a:hover { color: #ffa257; text-decoration: underline; }

body .kcpsr-am strong { color: var(--am-text); font-weight: 700; }

/* The system eyebrow. Used once per major block and never decoratively. */
.kcpsr-am .am-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.69rem;
	font-weight: 800;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--am-orange);
	margin: 0 0 14px;
}

.kcpsr-am .am-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: linear-gradient(90deg, var(--am-orange), transparent);
	border-radius: 2px;
}

.kcpsr-am .am-mono {
	font-family: var(--am-mono);
	letter-spacing: 0.04em;
}

/* ===================================================================== *
 * Masthead
 * ===================================================================== */

.kcpsr-am-mast {
	position: relative;
	border-bottom: 1px solid var(--am-line);
	background: linear-gradient(180deg, #101016 0%, #0a0a0d 100%);
	overflow: hidden;
}

/* The one ambient effect in the whole system: a slow thermal wash behind the
   masthead. It is very low opacity on purpose — the brief asks for controlled
   highlights, not a light show. */
.kcpsr-am-mast::before {
	content: "";
	position: absolute;
	inset: -60% -20% auto -20%;
	height: 220%;
	background:
		radial-gradient(46% 40% at 16% 20%, rgba(255,122,26,.16), transparent 62%),
		radial-gradient(40% 36% at 82% 12%, rgba(61,155,245,.13), transparent 64%),
		radial-gradient(34% 34% at 52% 92%, rgba(139,110,240,.11), transparent 66%);
	pointer-events: none;
	animation: am-drift 26s ease-in-out infinite alternate;
}

@keyframes am-drift {
	from { transform: translate3d(-2.5%, 0, 0) scale(1); }
	to   { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
	.kcpsr-am-mast::before { animation: none; }
	.kcpsr-am * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.kcpsr-am-mast .kcpsr-am-wrap { position: relative; z-index: 1; }

.kcpsr-am-brandbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 0 0;
	border-bottom: 1px solid var(--am-line-soft);
	padding-bottom: 16px;
}

.kcpsr-am-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--am-text-2);
}

.kcpsr-am-brand .am-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--am-orange);
	box-shadow: 0 0 0 3px rgba(255,122,26,.18), 0 0 14px rgba(255,122,26,.7);
	flex: none;
}

.kcpsr-am-hero { padding: 46px 0 52px; }

.kcpsr-am-hero h1 { max-width: 20ch; }

.kcpsr-am-hero .am-operated {
	display: inline-block;
	margin-top: 20px;
	padding: 7px 15px;
	border: 1px solid var(--am-line);
	border-radius: 999px;
	background: rgba(255,255,255,.03);
	font-size: 0.79rem;
	font-weight: 650;
	letter-spacing: 0.045em;
	color: var(--am-text-2);
}

/* ===================================================================== *
 * System status strip
 * ===================================================================== */

.kcpsr-am-status {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	padding: 13px 0;
	border-top: 1px solid var(--am-line-soft);
	font-size: 0.79rem;
	color: var(--am-text-3);
}

.kcpsr-am-status .am-stat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: 0.03em;
}

.kcpsr-am-status .am-led {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--am-green);
	box-shadow: 0 0 9px rgba(47,191,113,.85);
	flex: none;
	animation: am-pulse 2.6s ease-in-out infinite;
}

.kcpsr-am-status .am-led--amber { background: var(--am-amber); box-shadow: 0 0 9px rgba(255,176,32,.85); }
.kcpsr-am-status .am-led--blue  { background: var(--am-blue);  box-shadow: 0 0 9px rgba(61,155,245,.85); }
.kcpsr-am-status .am-led--off   { background: #3a3a45; box-shadow: none; animation: none; }

@keyframes am-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .42; }
}

/* ===================================================================== *
 * Panels
 * ===================================================================== */

.kcpsr-am-section { padding: 46px 0; }
.kcpsr-am-section--tight { padding: 30px 0; }

.kcpsr-am-panel {
	background: var(--am-panel);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	padding: 24px;
	box-shadow: var(--am-shadow);
}

.kcpsr-am-panel--flush { padding: 0; overflow: hidden; }

.kcpsr-am-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 18px 22px;
	border-bottom: 1px solid var(--am-line);
	background: var(--am-panel-2);
}

body .kcpsr-am-panel__head h2,
body .kcpsr-am-panel__head h3 { margin: 0; }

.kcpsr-am-panel__body { padding: 22px; }

/* A panel that is currently the point of the screen gets a thermal edge. */
.kcpsr-am-panel--hot {
	border-color: rgba(255,122,26,.34);
	box-shadow: var(--am-shadow), 0 0 0 1px rgba(255,122,26,.09), 0 0 34px rgba(255,122,26,.09);
}

.kcpsr-am-panel--cool {
	border-color: rgba(61,155,245,.3);
	box-shadow: var(--am-shadow), 0 0 30px rgba(61,155,245,.08);
}

/* ===================================================================== *
 * The three entry choices
 * ===================================================================== */

.kcpsr-am-choices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.kcpsr-am-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 22px 24px;
	background: var(--am-panel);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	color: var(--am-text);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	font: inherit;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

/* The accent bar is the only thing that distinguishes the three, and it uses
   the thermal ramp in order: lost is the hottest, sighting the coolest. */
.kcpsr-am-choice::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--am-accent, var(--am-orange));
	opacity: .85;
}

.kcpsr-am-choice--lost     { --am-accent: var(--am-orange); }
.kcpsr-am-choice--found    { --am-accent: var(--am-amber); }
.kcpsr-am-choice--sighting { --am-accent: var(--am-blue); }

.kcpsr-am-choice:hover,
.kcpsr-am-choice:focus-visible {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--am-accent) 46%, var(--am-line));
	background: var(--am-panel-2);
	box-shadow: var(--am-shadow), 0 0 32px -6px color-mix(in srgb, var(--am-accent) 34%, transparent);
	outline: none;
}

/* Focus must be visible for keyboard users even where hover styling exists.
   A box-shadow ring rather than an outline: an outline is clipped by the
   overflow:hidden this card needs for its accent bar. */
.kcpsr-am-choice:focus-visible {
	box-shadow: var(--am-shadow), 0 0 0 3px rgba(255,255,255,.16), 0 0 0 5px var(--am-accent);
}

.kcpsr-am-choice[aria-pressed="true"] {
	border-color: var(--am-accent);
	background: var(--am-panel-2);
	box-shadow: var(--am-shadow), 0 0 0 1px var(--am-accent), 0 0 36px -8px var(--am-accent);
}

.kcpsr-am-choice__icon {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: color-mix(in srgb, var(--am-accent) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--am-accent) 34%, transparent);
	margin-bottom: 6px;
}

.kcpsr-am-choice__icon svg { width: 21px; height: 21px; stroke: var(--am-accent); fill: none; stroke-width: 1.9; }

.kcpsr-am-choice__title { font-size: 1.22rem; font-weight: 750; letter-spacing: -0.01em; }
.kcpsr-am-choice__note  { font-size: 0.88rem; color: var(--am-text-3); line-height: 1.5; }

/* ===================================================================== *
 * Trust statement
 * ===================================================================== */

.kcpsr-am-trust {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 16px 19px;
	margin-top: 20px;
	background: rgba(61,155,245,.055);
	border: 1px solid rgba(61,155,245,.24);
	border-radius: var(--am-radius-sm);
	color: var(--am-text-2);
	font-size: 0.93rem;
	line-height: 1.55;
}

.kcpsr-am-trust svg { width: 19px; height: 19px; flex: none; margin-top: 2px; stroke: var(--am-blue); fill: none; stroke-width: 1.8; }

/* ===================================================================== *
 * Form
 * ===================================================================== */

.kcpsr-am-steps {
	display: flex;
	gap: 5px;
	margin-bottom: 26px;
	flex-wrap: wrap;
}

.kcpsr-am-steps__item {
	flex: 1 1 0;
	min-width: 62px;
	height: 4px;
	border-radius: 3px;
	background: var(--am-raised);
	position: relative;
	overflow: hidden;
}

.kcpsr-am-steps__item.is-done { background: rgba(255,122,26,.4); }
.kcpsr-am-steps__item.is-current { background: var(--am-orange); box-shadow: 0 0 13px rgba(255,122,26,.55); }

.kcpsr-am-steplabel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
	font-size: 0.74rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--am-text-3);
	font-weight: 700;
}

.kcpsr-am-field { margin-bottom: 19px; }

.kcpsr-am-field > label,
.kcpsr-am-fieldset > legend {
	display: block;
	margin-bottom: 7px;
	font-size: 0.87rem;
	font-weight: 650;
	color: var(--am-text);
	letter-spacing: 0.005em;
	padding: 0;
}

.kcpsr-am-field__hint {
	display: block;
	margin-top: 5px;
	font-size: 0.81rem;
	color: var(--am-text-3);
	line-height: 1.45;
}

.kcpsr-am-field__req { color: var(--am-orange); margin-left: 3px; }

.kcpsr-am-fieldset { border: 0; padding: 0; margin: 0 0 19px; }

.kcpsr-am input[type="text"],
.kcpsr-am input[type="email"],
.kcpsr-am input[type="tel"],
.kcpsr-am input[type="url"],
.kcpsr-am input[type="date"],
.kcpsr-am input[type="time"],
.kcpsr-am input[type="number"],
.kcpsr-am input[type="search"],
.kcpsr-am select,
.kcpsr-am textarea {
	width: 100%;
	padding: 13px 15px;
	background: #0c0c10;
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius-sm);
	color: var(--am-text);
	font-family: inherit;
	/* 16px minimum, or iOS Safari zooms the whole page on focus. */
	font-size: 16px;
	line-height: 1.4;
	transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
	-webkit-appearance: none;
	appearance: none;
}

.kcpsr-am textarea { min-height: 116px; resize: vertical; }

.kcpsr-am select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a3a4b2' stroke-width='1.8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 40px;
}

.kcpsr-am input:focus,
.kcpsr-am select:focus,
.kcpsr-am textarea:focus {
	outline: none;
	border-color: var(--am-orange);
	background: #0e0e13;
	box-shadow: 0 0 0 3px rgba(255,122,26,.17);
}

.kcpsr-am input::placeholder,
.kcpsr-am textarea::placeholder { color: #55566a; }

.kcpsr-am-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.kcpsr-am-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kcpsr-am-grid--full { grid-column: 1 / -1; }

/* Segmented choice — the mobile-first replacement for a radio group. */
.kcpsr-am-seg {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.kcpsr-am-seg button {
	flex: 1 1 auto;
	min-width: 88px;
	min-height: 46px;
	padding: 11px 15px;
	background: #0c0c10;
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius-sm);
	color: var(--am-text-2);
	font: inherit;
	font-size: 0.93rem;
	font-weight: 620;
	cursor: pointer;
	transition: all .13s ease;
}

.kcpsr-am-seg button:hover { border-color: #3a3a48; color: var(--am-text); }

.kcpsr-am-seg button[aria-pressed="true"] {
	background: rgba(255,122,26,.13);
	border-color: var(--am-orange);
	color: #ffc38f;
	box-shadow: 0 0 20px -6px rgba(255,122,26,.6);
}

.kcpsr-am-seg button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255,122,26,.28);
}

/* Consent checkboxes — deliberately large targets and individually worded. */
.kcpsr-am-consent {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 15px 17px;
	margin-bottom: 10px;
	background: #0c0c10;
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius-sm);
	cursor: pointer;
	transition: border-color .14s ease, background .14s ease;
}

.kcpsr-am-consent:hover { border-color: #3a3a48; }
.kcpsr-am-consent.is-on { border-color: rgba(255,122,26,.5); background: rgba(255,122,26,.055); }

.kcpsr-am-consent input[type="checkbox"] {
	width: 21px;
	height: 21px;
	margin: 1px 0 0;
	flex: none;
	accent-color: #ff7a1a;
	cursor: pointer;
}

.kcpsr-am-consent__text { font-size: 0.92rem; line-height: 1.5; color: var(--am-text-2); }
.kcpsr-am-consent__text b { display: block; color: var(--am-text); font-weight: 650; margin-bottom: 2px; }

/* ===================================================================== *
 * Buttons
 * ===================================================================== */

.kcpsr-am-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	padding: 14px 26px;
	border-radius: var(--am-radius-sm);
	border: 1px solid transparent;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.005em;
	cursor: pointer;
	text-decoration: none;
	transition: transform .13s ease, box-shadow .13s ease, background .13s ease, border-color .13s ease;
}

/*
 * COLOUR AND UNDERLINE RULES FOR BUTTONS ARE PREFIXED WITH `body`, and the
 * reason is a mistake made in this very file.
 *
 * The base link rule above is `body .kcpsr-am a` at (0,1,2) — it has to be, to
 * beat `.elementor-kit-379 a`. Several of these buttons are <a> elements. Their
 * colour rules were written as plain `.kcpsr-am-btn--primary` at (0,1,0), so the
 * link rule won and every primary anchor button rendered ORANGE TEXT ON AN
 * ORANGE GRADIENT — completely unreadable, including "Request professional
 * recovery help" on the confirmation screen. Raising the specificity here is
 * self-defence against my own base rule, not against the theme.
 */
body .kcpsr-am .kcpsr-am-btn:hover,
body .kcpsr-am .kcpsr-am-btn:focus,
body .kcpsr-am .kcpsr-am-btn:active { text-decoration: none; }

.kcpsr-am-btn:hover { transform: translateY(-1px); }
.kcpsr-am-btn:active { transform: translateY(0); }

/* Focus is a box-shadow ring, never an outline: several buttons sit inside
   overflow:hidden containers where an outline is clipped away. */
.kcpsr-am-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(8,8,10,1), 0 0 0 6px var(--am-orange);
}

body .kcpsr-am .kcpsr-am-btn--primary {
	background: linear-gradient(135deg, #ff8c30 0%, #ff6a0d 100%);
	color: #12100c;
	box-shadow: 0 5px 20px -6px rgba(255,122,26,.66);
}
body .kcpsr-am .kcpsr-am-btn--primary:hover { box-shadow: 0 9px 28px -6px rgba(255,122,26,.78); color: #12100c; }

body .kcpsr-am .kcpsr-am-btn--ghost {
	background: transparent;
	border-color: var(--am-line);
	color: var(--am-text);
}
body .kcpsr-am .kcpsr-am-btn--ghost:hover { border-color: #45455a; background: rgba(255,255,255,.035); color: var(--am-text); }

body .kcpsr-am .kcpsr-am-btn--danger {
	background: transparent;
	border-color: rgba(240,71,62,.44);
	color: #ff8f88;
}
body .kcpsr-am .kcpsr-am-btn--danger:hover { background: var(--am-red-dim); border-color: var(--am-red); color: #ffb0aa; }

body .kcpsr-am .kcpsr-am-btn--good {
	background: transparent;
	border-color: rgba(47,191,113,.44);
	color: #79e0ab;
}
body .kcpsr-am .kcpsr-am-btn--good:hover { background: var(--am-green-dim); border-color: var(--am-green); color: #a2ecc6; }

.kcpsr-am-btn--sm { min-height: 38px; padding: 8px 15px; font-size: 0.88rem; }
.kcpsr-am-btn--block { width: 100%; }

.kcpsr-am-btn[disabled],
.kcpsr-am-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.kcpsr-am-actions {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.kcpsr-am-actions--split { justify-content: space-between; }

/* ===================================================================== *
 * Photo upload
 * ===================================================================== */

.kcpsr-am-drop {
	position: relative;
	display: block;
	padding: 34px 22px;
	border: 1.5px dashed #35354a;
	border-radius: var(--am-radius);
	background: #0c0c10;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.kcpsr-am-drop:hover,
.kcpsr-am-drop.is-over { border-color: var(--am-orange); background: rgba(255,122,26,.05); }

.kcpsr-am-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.kcpsr-am-drop__icon { width: 38px; height: 38px; margin: 0 auto 12px; stroke: var(--am-orange); fill: none; stroke-width: 1.6; }
.kcpsr-am-drop__title { font-weight: 700; color: var(--am-text); margin-bottom: 5px; font-size: 1.02rem; }
.kcpsr-am-drop__note { font-size: 0.83rem; color: var(--am-text-3); }

.kcpsr-am-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	gap: 11px;
	margin-top: 15px;
}

.kcpsr-am-thumb {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--am-radius-sm);
	overflow: hidden;
	border: 1px solid var(--am-line);
	background: #0c0c10;
}

.kcpsr-am-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kcpsr-am-thumb__remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	border: 0;
	background: rgba(8,8,10,.86);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	backdrop-filter: blur(3px);
}
.kcpsr-am-thumb__remove:hover { background: var(--am-red); }

.kcpsr-am-thumb__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(255,255,255,.1);
}
.kcpsr-am-thumb__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--am-orange);
	box-shadow: 0 0 10px rgba(255,122,26,.9);
	transition: width .22s ease;
}
.kcpsr-am-thumb.is-done .kcpsr-am-thumb__bar { display: none; }
.kcpsr-am-thumb.is-error { border-color: var(--am-red); }

/* ===================================================================== *
 * Alerts
 * ===================================================================== */

.kcpsr-am-alert {
	padding: 14px 18px;
	border-radius: var(--am-radius-sm);
	border: 1px solid var(--am-line);
	background: var(--am-panel-2);
	color: var(--am-text-2);
	font-size: 0.93rem;
	line-height: 1.55;
	margin-bottom: 16px;
}

.kcpsr-am-alert--error { border-color: rgba(240,71,62,.44); background: var(--am-red-dim); color: #ffb4ae; }
.kcpsr-am-alert--good  { border-color: rgba(47,191,113,.44); background: var(--am-green-dim); color: #9fe9c2; }
.kcpsr-am-alert--warn  { border-color: rgba(255,176,32,.44); background: var(--am-amber-dim); color: #ffd98a; }
.kcpsr-am-alert--info  { border-color: rgba(61,155,245,.4); background: var(--am-blue-dim); color: #a8d3ff; }

.kcpsr-am-alert ul { margin: 8px 0 0; padding-left: 20px; }
.kcpsr-am-alert li { margin-bottom: 4px; }

/* ===================================================================== *
 * Reference number
 * ===================================================================== */

.kcpsr-am-ref {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px 22px;
	border-radius: var(--am-radius-sm);
	border: 1px solid rgba(255,122,26,.36);
	background: linear-gradient(135deg, rgba(255,122,26,.13), rgba(255,122,26,.045));
	box-shadow: 0 0 30px -10px rgba(255,122,26,.5);
}

.kcpsr-am-ref__label {
	font-size: 0.66rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--am-text-3);
	font-weight: 750;
}

.kcpsr-am-ref__value {
	font-family: var(--am-mono);
	font-size: clamp(1.5rem, 4.2vw, 1.95rem);
	font-weight: 700;
	color: #ffc38f;
	letter-spacing: 0.07em;
}

/* ===================================================================== *
 * Data list / definition rows
 * ===================================================================== */

.kcpsr-am-dl { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 0; }

.kcpsr-am-dl dt,
.kcpsr-am-dl dd {
	padding: 10px 0;
	border-bottom: 1px solid var(--am-line-soft);
	margin: 0;
	font-size: 0.92rem;
}

.kcpsr-am-dl dt { color: var(--am-text-3); padding-right: 18px; }
.kcpsr-am-dl dd { color: var(--am-text); }
.kcpsr-am-dl dt:last-of-type, .kcpsr-am-dl dd:last-of-type { border-bottom: 0; }

/* ===================================================================== *
 * Badges and pills
 * ===================================================================== */

.kcpsr-am-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid var(--am-line);
	background: var(--am-raised);
	color: var(--am-text-2);
	white-space: nowrap;
}

.kcpsr-am-badge--lost     { border-color: rgba(255,122,26,.5); background: var(--am-orange-dim); color: #ffb98a; }
.kcpsr-am-badge--found    { border-color: rgba(255,176,32,.5); background: var(--am-amber-dim); color: #ffd48a; }
.kcpsr-am-badge--sighting { border-color: rgba(61,155,245,.5); background: var(--am-blue-dim); color: #9fcdff; }
.kcpsr-am-badge--good     { border-color: rgba(47,191,113,.5); background: var(--am-green-dim); color: #96e6bd; }
.kcpsr-am-badge--bad      { border-color: rgba(240,71,62,.5); background: var(--am-red-dim); color: #ffaba5; }
.kcpsr-am-badge--info     { border-color: rgba(139,110,240,.5); background: var(--am-violet-dim); color: #c3b2ff; }
.kcpsr-am-badge--test     { border-color: rgba(255,176,32,.7); background: rgba(255,176,32,.2); color: #ffd98a; }

/* ===================================================================== *
 * Score display
 * ===================================================================== */

.kcpsr-am-score {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-family: var(--am-mono);
}

.kcpsr-am-score__n { font-size: 2.5rem; font-weight: 750; line-height: 1; letter-spacing: -0.02em; }
.kcpsr-am-score__u { font-size: 1rem; color: var(--am-text-3); }

.kcpsr-am-score--hot  .kcpsr-am-score__n { color: var(--am-orange); text-shadow: 0 0 26px rgba(255,122,26,.5); }
.kcpsr-am-score--warm .kcpsr-am-score__n { color: var(--am-amber); }
.kcpsr-am-score--cool .kcpsr-am-score__n { color: var(--am-blue); }

.kcpsr-am-meters { display: grid; gap: 12px; }

.kcpsr-am-meter__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 5px;
	font-size: 0.82rem;
}
.kcpsr-am-meter__label { color: var(--am-text-2); }
.kcpsr-am-meter__value { font-family: var(--am-mono); color: var(--am-text); font-weight: 650; }

.kcpsr-am-meter__track {
	height: 7px;
	border-radius: 4px;
	background: #1a1a22;
	overflow: hidden;
}

.kcpsr-am-meter__fill {
	height: 100%;
	border-radius: 4px;
	background: var(--am-meter, var(--am-orange));
	box-shadow: 0 0 12px -1px var(--am-meter, var(--am-orange));
	transition: width .5s cubic-bezier(.22,.61,.36,1);
}

.kcpsr-am-meter--image { --am-meter: var(--am-violet); }
.kcpsr-am-meter--geo   { --am-meter: var(--am-blue); }
.kcpsr-am-meter--date  { --am-meter: var(--am-cyan); }
.kcpsr-am-meter--desc  { --am-meter: var(--am-amber); }
.kcpsr-am-meter--total { --am-meter: var(--am-orange); }

.kcpsr-am-meter__none {
	font-size: 0.8rem;
	color: var(--am-text-3);
	font-style: italic;
}

/* ===================================================================== *
 * Side-by-side comparison
 * ===================================================================== */

.kcpsr-am-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.kcpsr-am-side {
	background: var(--am-panel);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	overflow: hidden;
}

.kcpsr-am-side__head {
	padding: 13px 17px;
	border-bottom: 1px solid var(--am-line);
	background: var(--am-panel-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 11px;
	flex-wrap: wrap;
}

.kcpsr-am-side__ref { font-family: var(--am-mono); font-size: 0.95rem; font-weight: 700; color: #ffc38f; letter-spacing: .05em; }

.kcpsr-am-side__hero {
	aspect-ratio: 4 / 3;
	background: #0a0a0d;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--am-line);
}
.kcpsr-am-side__hero img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kcpsr-am-side__hero .am-nophoto { color: var(--am-text-3); font-size: 0.87rem; }

.kcpsr-am-side__gallery {
	display: flex;
	gap: 7px;
	padding: 11px;
	overflow-x: auto;
	border-bottom: 1px solid var(--am-line-soft);
}
.kcpsr-am-side__gallery img {
	width: 62px;
	height: 62px;
	object-fit: cover;
	border-radius: 7px;
	border: 1px solid var(--am-line);
	cursor: pointer;
	flex: none;
	transition: border-color .13s ease;
}
.kcpsr-am-side__gallery img:hover,
.kcpsr-am-side__gallery img.is-active { border-color: var(--am-orange); }

.kcpsr-am-side__body { padding: 15px 17px; }

/* ===================================================================== *
 * Factor lists (matching / conflicting / unknown)
 * ===================================================================== */

.kcpsr-am-factors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.kcpsr-am-factorcol {
	background: var(--am-panel);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	overflow: hidden;
}

.kcpsr-am-factorcol__head {
	padding: 11px 15px;
	font-size: 0.73rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--am-line);
}

.kcpsr-am-factorcol--match    .kcpsr-am-factorcol__head { color: #96e6bd; background: var(--am-green-dim); }
.kcpsr-am-factorcol--conflict .kcpsr-am-factorcol__head { color: #ffaba5; background: var(--am-red-dim); }
.kcpsr-am-factorcol--unknown  .kcpsr-am-factorcol__head { color: var(--am-text-3); background: var(--am-raised); }

.kcpsr-am-factor {
	padding: 11px 15px;
	border-bottom: 1px solid var(--am-line-soft);
}
.kcpsr-am-factor:last-child { border-bottom: 0; }
.kcpsr-am-factor__label { font-size: 0.88rem; font-weight: 650; color: var(--am-text); margin-bottom: 2px; }
.kcpsr-am-factor__note  { font-size: 0.82rem; color: var(--am-text-3); line-height: 1.45; }

.kcpsr-am-empty { padding: 15px; color: var(--am-text-3); font-size: 0.85rem; font-style: italic; }

/* ===================================================================== *
 * Console
 * ===================================================================== */

/* minmax(0,1fr) on BOTH tracks. See the mobile override at the foot of this
   file for why a bare 1fr silently clips the entire console. */
.kcpsr-am-console { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; }
.kcpsr-am-console > * { min-width: 0; }

.kcpsr-am-nav {
	position: sticky;
	top: 18px;
	background: var(--am-panel);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	padding: 9px;
	max-height: calc(100vh - 36px);
	overflow-y: auto;
}

.kcpsr-am-nav__group {
	padding: 13px 11px 5px;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--am-text-3);
	font-weight: 800;
}

/* Same specificity defence as the buttons: these are <a> elements and the base
   link rule would otherwise paint the whole queue list orange. */
body .kcpsr-am .kcpsr-am-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;
	padding: 9px 11px;
	border-radius: 8px;
	color: var(--am-text-2);
	font-size: 0.9rem;
	font-weight: 550;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}

body .kcpsr-am .kcpsr-am-nav a:hover { background: var(--am-raised); color: var(--am-text); text-decoration: none; }

body .kcpsr-am .kcpsr-am-nav a.is-active {
	background: rgba(255,122,26,.13);
	color: #ffc38f;
	box-shadow: inset 2px 0 0 var(--am-orange);
}

.kcpsr-am-nav__count {
	font-family: var(--am-mono);
	font-size: 0.76rem;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--am-raised);
	color: var(--am-text-3);
}
.kcpsr-am-nav a.is-active .kcpsr-am-nav__count { background: rgba(255,122,26,.22); color: #ffc38f; }

.kcpsr-am-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: 13px;
	margin-bottom: 22px;
}

.kcpsr-am-tile {
	position: relative;
	padding: 17px 18px;
	background: var(--am-panel);
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	overflow: hidden;
}

.kcpsr-am-tile::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--am-tile, var(--am-line));
	opacity: .9;
}

.kcpsr-am-tile--hot    { --am-tile: var(--am-orange); }
.kcpsr-am-tile--warm   { --am-tile: var(--am-amber); }
.kcpsr-am-tile--cool   { --am-tile: var(--am-blue); }
.kcpsr-am-tile--good   { --am-tile: var(--am-green); }
.kcpsr-am-tile--bad    { --am-tile: var(--am-red); }
.kcpsr-am-tile--info   { --am-tile: var(--am-violet); }

.kcpsr-am-tile__n {
	font-family: var(--am-mono);
	font-size: 2rem;
	font-weight: 750;
	line-height: 1.05;
	color: var(--am-text);
	letter-spacing: -0.02em;
}
.kcpsr-am-tile__l {
	font-size: 0.78rem;
	color: var(--am-text-3);
	margin-top: 4px;
	letter-spacing: 0.02em;
}

/* Tables scroll INSIDE their own wrapper. A table with a min-width and no
   wrapper pushes the whole page sideways on a phone — a mistake already made
   and fixed once on the Operations dashboard. */
.kcpsr-am-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
	background: var(--am-panel);
}

.kcpsr-am-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.89rem; }

.kcpsr-am-table th {
	text-align: left;
	padding: 11px 15px;
	background: var(--am-panel-2);
	border-bottom: 1px solid var(--am-line);
	color: var(--am-text-3);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kcpsr-am-table td {
	padding: 12px 15px;
	border-bottom: 1px solid var(--am-line-soft);
	color: var(--am-text-2);
	vertical-align: middle;
}

.kcpsr-am-table tr:last-child td { border-bottom: 0; }
.kcpsr-am-table tbody tr:hover td { background: rgba(255,255,255,.022); }
.kcpsr-am-table td.am-num { font-family: var(--am-mono); color: var(--am-text); }
.kcpsr-am-table a { font-weight: 620; }

.kcpsr-am-thumbcell {
	width: 44px;
	height: 44px;
	border-radius: 7px;
	object-fit: cover;
	border: 1px solid var(--am-line);
	display: block;
}

/* ===================================================================== *
 * Loading and empty states
 * ===================================================================== */

.kcpsr-am-loading {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 30px;
	color: var(--am-text-3);
	font-size: 0.92rem;
	justify-content: center;
}

.kcpsr-am-spin {
	width: 17px;
	height: 17px;
	border: 2px solid var(--am-line);
	border-top-color: var(--am-orange);
	border-radius: 50%;
	animation: am-spin .7s linear infinite;
	flex: none;
}

@keyframes am-spin { to { transform: rotate(360deg); } }

.kcpsr-am-blank {
	padding: 46px 24px;
	text-align: center;
	color: var(--am-text-3);
}
.kcpsr-am-blank__t { font-size: 1.05rem; color: var(--am-text-2); margin-bottom: 6px; font-weight: 650; }

/* ===================================================================== *
 * Modal confirmation
 * ===================================================================== */

.kcpsr-am-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(4,4,6,.82);
	backdrop-filter: blur(4px);
}

.kcpsr-am-modal__box {
	width: 100%;
	max-width: 520px;
	background: var(--am-panel);
	border: 1px solid rgba(255,122,26,.34);
	border-radius: var(--am-radius);
	box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 44px -14px rgba(255,122,26,.4);
	overflow: hidden;
	max-height: 90vh;
	overflow-y: auto;
}

.kcpsr-am-modal__head { padding: 19px 22px; border-bottom: 1px solid var(--am-line); background: var(--am-panel-2); }
.kcpsr-am-modal__body { padding: 22px; }
.kcpsr-am-modal__foot { padding: 16px 22px; border-top: 1px solid var(--am-line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ===================================================================== *
 * Footer
 * ===================================================================== */

.kcpsr-am-foot {
	border-top: 1px solid var(--am-line);
	padding: 26px 0 34px;
	color: var(--am-text-3);
	font-size: 0.85rem;
	background: #0a0a0d;
}

.kcpsr-am-foot__row { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ===================================================================== *
 * Utilities
 * ===================================================================== */

.kcpsr-am .am-hide { display: none !important; }
.kcpsr-am .am-muted { color: var(--am-text-3); }
.kcpsr-am .am-nowrap { white-space: nowrap; }
.kcpsr-am .am-right { text-align: right; }
.kcpsr-am .am-mt0 { margin-top: 0; }
.kcpsr-am .am-mb0 { margin-bottom: 0; }
.kcpsr-am .am-mt24 { margin-top: 24px; }

.kcpsr-am .am-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ===================================================================== *
 * Responsive
 * ===================================================================== */

@media (max-width: 1023px) {
	/*
	 * minmax(0, 1fr), NOT 1fr — and the difference is the whole staff console on
	 * a phone.
	 *
	 * A bare `1fr` track is `minmax(auto, 1fr)`, and an `auto` minimum resolves
	 * to the item's MIN-CONTENT width. The view holds tables carrying
	 * min-width:720px, so its min-content width is about 913px and the track
	 * simply refused to go narrower. At 390px the console laid itself out 913px
	 * wide inside a 339px column, and because `.kcpsr-am` sets overflow-x:clip
	 * the page did not even scroll sideways — the right-hand two thirds of every
	 * dashboard, table and action row was silently cut off with no scrollbar to
	 * reveal it. A clean-looking page that has eaten its own content.
	 *
	 * minmax(0,1fr) lets the track shrink past min-content, which hands the
	 * scrolling back to .kcpsr-am-tablewrap where it belongs.
	 */
	.kcpsr-am-console { grid-template-columns: minmax(0, 1fr); }

	/* Same reasoning, one level down: a grid ITEM also defaults to min-width:auto. */
	.kcpsr-am-console > * { min-width: 0; }

	body .kcpsr-am .kcpsr-am-nav a.is-active { box-shadow: inset 0 -2px 0 var(--am-orange); }

	.kcpsr-am-nav {
		position: static;
		max-height: none;
		display: flex;
		gap: 6px;
		overflow-x: auto;
		padding: 8px;
		-webkit-overflow-scrolling: touch;
	}
	.kcpsr-am-nav__group { display: none; }
	.kcpsr-am-nav a { white-space: nowrap; flex: none; }
	.kcpsr-am-nav a.is-active { box-shadow: inset 0 -2px 0 var(--am-orange); }

	.kcpsr-am-factors { grid-template-columns: 1fr; }
}

@media (max-width: 750px) {
	.kcpsr-am-wrap { padding: 0 16px; }

	.kcpsr-am-choices { grid-template-columns: 1fr; }
	.kcpsr-am-compare { grid-template-columns: 1fr; }
	.kcpsr-am-grid,
	.kcpsr-am-grid--3 { grid-template-columns: 1fr; }

	.kcpsr-am-hero { padding: 32px 0 36px; }
	.kcpsr-am-section { padding: 32px 0; }
	.kcpsr-am-panel { padding: 18px; }
	.kcpsr-am-panel__head,
	.kcpsr-am-panel__body { padding: 16px; }

	.kcpsr-am-dl { grid-template-columns: 1fr; }
	.kcpsr-am-dl dt { padding-bottom: 0; border-bottom: 0; font-size: 0.8rem; }
	.kcpsr-am-dl dd { padding-top: 2px; }

	.kcpsr-am-tiles { grid-template-columns: repeat(2, 1fr); }
	.kcpsr-am-tile__n { font-size: 1.6rem; }

	/* Full-width primary action on a phone: it is the only thing on the screen
	   that matters at that moment. */
	.kcpsr-am-actions .kcpsr-am-btn { flex: 1 1 100%; }
	.kcpsr-am-actions--split { flex-direction: column-reverse; }

	.kcpsr-am-score__n { font-size: 2rem; }
}

@media (max-width: 400px) {
	.kcpsr-am-tiles { grid-template-columns: 1fr; }
}

/* Honour a user's contrast preference without abandoning the identity. */
@media (prefers-contrast: more) {
	.kcpsr-am { --am-line: #45455a; --am-text-2: #c9cad6; --am-text-3: #9a9bab; }
}

/* ===================================================================== *
 * Live Email Delivery — paused banner and log
 *
 * The banner sits above the masthead and is deliberately loud. It is the first
 * thing on the page in source order, so it is announced first by a screen
 * reader and painted first on a slow connection.
 *
 * It uses minmax(0,1fr) and flex-wrap for the same reason the console grid
 * does: a bare 1fr track resolves to min-content, and on a phone that silently
 * pushed two thirds of this console off-screen once already.
 * ===================================================================== */

.kcpsr-am .kcpsr-am-emailpause {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 12px 18px;
	background: linear-gradient(135deg, #3a1206 0%, #24160a 100%);
	border-bottom: 2px solid #ff7a1a;
	color: #ffe4cc;
	font-size: .95rem;
	line-height: 1.45;
}

.kcpsr-am .kcpsr-am-emailpause__dot {
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff7a1a;
	box-shadow: 0 0 0 0 rgba(255, 122, 26, .7);
	animation: kcpsrAmPauseBeat 2s ease-out infinite;
}

@keyframes kcpsrAmPauseBeat {
	0%   { box-shadow: 0 0 0 0 rgba(255, 122, 26, .7); }
	70%  { box-shadow: 0 0 0 12px rgba(255, 122, 26, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.kcpsr-am .kcpsr-am-emailpause__dot { animation: none; }
}

.kcpsr-am .kcpsr-am-emailpause__text {
	flex: 1 1 260px;
	min-width: 0;
}

.kcpsr-am .kcpsr-am-emailpause__text strong {
	display: block;
	color: #fff;
	font-weight: 800;
	letter-spacing: .08em;
	font-size: .95rem;
}

.kcpsr-am .kcpsr-am-emailpause__sub {
	display: block;
	margin-top: 3px;
	color: #e2bfa2;
	font-size: .82rem;
}

.kcpsr-am a.kcpsr-am-emailpause__link {
	flex: 0 0 auto;
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: #ff7a1a;
	color: #150c05 !important;
	font-weight: 800;
	font-size: .82rem;
	text-decoration: none !important;
	white-space: nowrap;
}

.kcpsr-am a.kcpsr-am-emailpause__link:hover { filter: brightness(1.1); }

.kcpsr-am .kcpsr-am-badge--paused {
	background: #3a1206;
	border-color: #ff7a1a;
	color: #ffb066;
}

/* On a phone the banner becomes a stacked block and the button goes full width,
 * so it stays a tap target rather than a sliver in the corner. */
@media (max-width: 640px) {
	.kcpsr-am .kcpsr-am-emailpause {
		padding: 12px 14px;
	}
	.kcpsr-am .kcpsr-am-emailpause__text { flex: 1 1 100%; }
	.kcpsr-am a.kcpsr-am-emailpause__link {
		flex: 1 1 100%;
		width: 100%;
		text-align: center;
		padding: 11px 16px;
	}
}

/* --- the suppressed-message list ------------------------------------- */

.kcpsr-am .kcpsr-am-suppressed {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.kcpsr-am .kcpsr-am-suppressed__row {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	min-width: 0;
	padding: 13px 15px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
}

.kcpsr-am .kcpsr-am-suppressed__row > * { min-width: 0; }

.kcpsr-am .kcpsr-am-suppressed__subject {
	font-weight: 700;
	color: #f2f2f6;
	overflow-wrap: anywhere;
}

.kcpsr-am .kcpsr-am-suppressed__meta {
	margin-top: 4px;
	font-size: .8rem;
	color: #9a9aa6;
	overflow-wrap: anywhere;
}

.kcpsr-am .kcpsr-am-suppressed__status {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kcpsr-am .is-suppressed { color: #ffb066; }
.kcpsr-am .is-released   { color: #7fd48a; }
.kcpsr-am .is-discarded  { color: #8a8a96; }
.kcpsr-am .is-release_failed { color: #ff6b6b; }

.kcpsr-am .kcpsr-am-preview {
	width: 100%;
	min-height: 420px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	background: #0b0b0d;
}

@media (max-width: 640px) {
	.kcpsr-am .kcpsr-am-suppressed__row {
		grid-template-columns: 26px minmax(0, 1fr);
	}
	.kcpsr-am .kcpsr-am-suppressed__status { grid-column: 2; }
	.kcpsr-am .kcpsr-am-preview { min-height: 300px; }
}