/**
 * TS Priority Scorer — front-end styles.
 *
 * Themed with the bootstrap-theme-child design tokens (purple/coral on a light
 * surface, Plus Jakarta Sans display + Inter body), matching the other free
 * tools. All values fall back to a literal so the tool still looks right if
 * the shortcode is used somewhere the theme :root variables are not present.
 */

.ts-prs {
	--prs-plum-50:  var(--ts-plum-50, #F6F3F6);
	--prs-plum-100: var(--ts-plum-100, #EBE3EC);
	--prs-plum-200: var(--ts-plum-200, #D5C6D7);
	--prs-plum-500: var(--ts-plum-500, #4A3550);
	--prs-plum-600: var(--ts-plum-600, #2A1E30);
	--prs-plum-700: var(--ts-plum-700, #180F1D);
	--prs-plum-900: var(--ts-plum-900, #0B0610);

	--prs-ink-900: var(--ts-ink-900, #111827);
	--prs-ink-700: var(--ts-ink-700, #374151);
	--prs-ink-500: var(--ts-ink-500, #6B7280);
	--prs-ink-400: var(--ts-ink-400, #9CA3AF);
	--prs-ink-200: var(--ts-ink-200, #E5E7EB);
	--prs-ink-100: var(--ts-ink-100, #F3F4F6);
	--prs-ink-50:  var(--ts-ink-50, #F9FAFB);
	--prs-white:   var(--ts-white, #FFFFFF);

	--prs-font-display: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
	--prs-font-body:    var(--font-body, 'Inter', system-ui, sans-serif);
	--prs-font-mono:    var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

	--prs-r-md:   var(--r-md, 10px);
	--prs-r-card: var(--r-card, 12px);
	--prs-r-pill: var(--r-pill, 999px);
	--prs-shadow: var(--shadow-md, 0 4px 14px rgba(17,24,39,.06));
	--prs-shadow-hover: var(--shadow-card-hover, 0 6px 20px rgba(42, 30, 48,.08), 0 2px 6px rgba(17,24,39,.04));

	box-sizing: border-box;
	font-family: var(--prs-font-body);
	color: var(--prs-ink-900);
}

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

/* Outer shell — same chrome as the other free tools. */
.ts-prs__shell {
	max-width: 800px;
	margin: 0 auto;
	background: var(--prs-white);
	border: 1px solid var(--prs-ink-200);
	border-radius: var(--r-lg, 16px);
	overflow: hidden;
	box-shadow: var(--prs-shadow);
}

/* Persistent branded tool header */
.ts-prs__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 32px 20px;
	background: linear-gradient(135deg, var(--prs-plum-600) 0%, var(--prs-plum-500) 100%);
}
.ts-prs__toolbar-left { display: flex; align-items: center; gap: 12px; }
.ts-prs__toolbar-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 11px;
}
.ts-prs__toolbar-icon svg { width: 22px; height: 22px; }
.ts-prs__toolbar-meta { display: flex; flex-direction: column; gap: 2px; }
.ts-prs__toolbar-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--prs-plum-200);
}
.ts-prs__toolbar-title {
	font-family: var(--prs-font-display);
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.015em;
	line-height: 1.2;
}
.ts-prs__toolbar-pill {
	flex-shrink: 0;
	background: #F0553F;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--prs-r-pill);
}

#ts-prs-app { display: block; padding: 26px 30px 30px; }

.ts-prs-card { animation: tsPrsFade 0.35s ease; }
@keyframes tsPrsFade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Shown while the previous run (if any) is fetched. */
.ts-prs-loading {
	padding: 24px 0;
	text-align: center;
	color: var(--prs-ink-500);
	font-size: 14px;
}

.ts-prs-intro {
	font-size: 15px;
	color: var(--prs-ink-700);
	line-height: 1.6;
	margin-bottom: 20px;
}

/* ── Item rows ────────────────────────────────────────────────────────── */
.ts-prs-items { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.ts-prs-item {
	background: var(--prs-ink-50);
	border: 1px solid var(--prs-ink-200);
	border-radius: var(--prs-r-card);
	padding: 16px;
}
.ts-prs-item__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ts-prs-item__name {
	flex: 1;
	background: var(--prs-white);
	border: 1px solid var(--prs-ink-200);
	border-radius: var(--prs-r-md);
	color: var(--prs-ink-900);
	font-family: inherit; font-size: 15px; font-weight: 600;
	padding: 10px 14px;
	outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.ts-prs-item__name:focus {
	border-color: var(--prs-plum-500);
	box-shadow: var(--shadow-focus, 0 0 0 3px rgba(109, 79, 114,.35));
}
.ts-prs-remove {
	flex-shrink: 0;
	width: 32px; height: 32px;
	background: transparent;
	border: 1px solid var(--prs-ink-200);
	border-radius: 8px;
	color: var(--prs-ink-500);
	font-size: 18px; line-height: 1; cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
.ts-prs-remove:hover { border-color: #DC2626; color: #DC2626; }

.ts-prs-item__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.ts-prs-field { display: flex; flex-direction: column; gap: 6px; }
.ts-prs-field__label {
	font-size: 12px; color: var(--prs-ink-500); line-height: 1.4;
}
.ts-prs-select {
	background: var(--prs-white);
	border: 1px solid var(--prs-ink-200);
	border-radius: var(--prs-r-md);
	color: var(--prs-ink-900);
	font-family: inherit; font-size: 14px;
	padding: 9px 12px;
	outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.ts-prs-select:focus {
	border-color: var(--prs-plum-500);
	box-shadow: var(--shadow-focus, 0 0 0 3px rgba(109, 79, 114,.35));
}

.ts-prs-add {
	width: 100%;
	background: transparent;
	border: 1px dashed var(--prs-ink-200);
	border-radius: var(--prs-r-md);
	color: var(--prs-plum-600);
	font-family: inherit; font-size: 14px; font-weight: 600;
	padding: 12px; cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.ts-prs-add:hover:not(:disabled) { border-color: var(--prs-plum-500); background: var(--prs-plum-50); }
.ts-prs-add:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ts-prs-btn-primary {
	background: linear-gradient(135deg, var(--prs-plum-600) 0%, var(--prs-plum-700) 100%);
	color: #fff; border: none; border-radius: var(--prs-r-md);
	padding: 13px 28px; font-family: inherit; font-size: 15px; font-weight: 600;
	cursor: pointer; transition: filter 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.ts-prs-btn-primary:hover:not(:disabled) {
	filter: brightness(1.07);
	box-shadow: 0 8px 24px rgba(42, 30, 48,.28);
}
.ts-prs-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.ts-prs-btn-secondary {
	background: transparent; color: var(--prs-ink-500);
	border: 1px solid var(--prs-ink-200); border-radius: var(--prs-r-md);
	padding: 13px 20px; font-family: inherit; font-size: 15px; cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
.ts-prs-btn-secondary:hover { border-color: var(--prs-plum-300, #A88CAA); color: var(--prs-ink-900); }

/* ── Results ──────────────────────────────────────────────────────────── */
.ts-prs-section-label {
	font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
	font-weight: 600; color: var(--prs-plum-600); margin-bottom: 16px;
}
.ts-prs-results { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ts-prs-result-row {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	background: var(--prs-ink-50);
	border: 1px solid var(--prs-ink-200);
	border-radius: var(--prs-r-md);
}
.ts-prs-result-row__rank {
	flex-shrink: 0;
	width: 24px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	background: var(--prs-plum-600); color: #fff;
	border-radius: 50%;
	font-size: 12px; font-weight: 700;
}
.ts-prs-result-row__name { flex: 1; font-size: 14px; font-weight: 600; color: var(--prs-ink-900); }
.ts-prs-result-row__score {
	flex-shrink: 0; font-family: var(--prs-font-mono); font-size: 13px; font-weight: 700;
	color: var(--prs-plum-600); min-width: 44px; text-align: right;
}

.ts-prs-badge {
	flex-shrink: 0;
	display: inline-flex; align-items: center;
	padding: 4px 10px; border-radius: var(--prs-r-pill);
	font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
}
.ts-prs-badge--red    { background: #FEE2E2; color: #B91C1C; }
.ts-prs-badge--orange { background: #FFEDD5; color: #C2410C; }
.ts-prs-badge--yellow { background: #FEF9C3; color: #A16207; }
.ts-prs-badge--green  { background: #D1FAE5; color: #047857; }

/* ── 2x2 matrix ───────────────────────────────────────────────────────────
   Score on the vertical axis, effort on the horizontal. The axis captions sit
   outside the grid so the four quadrants stay equal width whatever they hold.
*/
.ts-prs-matrix-wrap {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 8px;
	margin-bottom: 24px;
}
.ts-prs-matrix-axis {
	font-size: 10px; font-weight: 700; letter-spacing: 1px;
	text-transform: uppercase; color: var(--prs-ink-400);
}
.ts-prs-matrix-axis--y {
	grid-column: 1; grid-row: 1;
	writing-mode: vertical-rl; transform: rotate(180deg);
	display: flex; align-items: center; justify-content: center;
}
.ts-prs-matrix-axis--x {
	grid-column: 2; grid-row: 2;
	display: flex; justify-content: space-between;
}
.ts-prs-matrix {
	grid-column: 2; grid-row: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.ts-prs-quad {
	border: 1px solid; border-radius: var(--prs-r-card);
	padding: 14px; min-width: 0;
}
.ts-prs-quad--green  { background: rgba(16, 185, 129, 0.09); border-color: rgba(16, 185, 129, 0.32); }
.ts-prs-quad--orange { background: rgba(249, 115, 22, 0.09); border-color: rgba(249, 115, 22, 0.32); }
.ts-prs-quad--yellow { background: rgba(234, 179, 8, 0.12);  border-color: rgba(234, 179, 8, 0.34); }
.ts-prs-quad--red    { background: rgba(239, 68, 68, 0.09);  border-color: rgba(239, 68, 68, 0.30); }
.ts-prs-quad--gray   { background: var(--prs-ink-50); border-color: var(--prs-ink-200); }

.ts-prs-quad__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px; margin-bottom: 4px;
}
.ts-prs-quad__title {
	font-family: var(--prs-font-display);
	font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
}
.ts-prs-quad--green  .ts-prs-quad__title { color: #047857; }
.ts-prs-quad--orange .ts-prs-quad__title { color: #C2410C; }
.ts-prs-quad--yellow .ts-prs-quad__title { color: #A16207; }
.ts-prs-quad--red    .ts-prs-quad__title { color: #B91C1C; }
.ts-prs-quad--gray   .ts-prs-quad__title { color: var(--prs-ink-700); }

.ts-prs-quad__count {
	flex-shrink: 0;
	min-width: 20px; padding: 1px 7px;
	background: rgba(255, 255, 255, 0.75);
	border-radius: var(--prs-r-pill);
	font-family: var(--prs-font-mono); font-size: 11px; font-weight: 700;
	color: var(--prs-ink-700); text-align: center;
}
.ts-prs-quad__meaning {
	margin: 0 0 10px; font-size: 11px; line-height: 1.5;
	color: var(--prs-ink-500);
}
.ts-prs-quad__list { list-style: none; margin: 0; padding: 0; }
.ts-prs-quad__item {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 9px; margin: 0 0 6px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: var(--prs-r-md);
}
.ts-prs-quad__item:last-child { margin-bottom: 0; }
.ts-prs-quad__rank {
	flex-shrink: 0;
	width: 18px; height: 18px;
	display: flex; align-items: center; justify-content: center;
	background: var(--prs-plum-600); color: #fff; border-radius: 50%;
	font-size: 10px; font-weight: 700;
}
.ts-prs-quad__name {
	flex: 1; min-width: 0;
	font-size: 13px; font-weight: 600; color: var(--prs-ink-900);
	overflow-wrap: anywhere;
}
.ts-prs-quad__score {
	flex-shrink: 0;
	font-family: var(--prs-font-mono); font-size: 11px; font-weight: 700;
	color: var(--prs-ink-500);
}
.ts-prs-quad__empty {
	margin: 0; padding: 7px 0;
	font-size: 12px; font-style: italic; color: var(--prs-ink-400);
}

.ts-prs-insight {
	background: #FFF7ED; border: 1px solid #FED7AA; border-radius: var(--prs-r-md);
	padding: 14px 16px; margin-bottom: 24px;
	font-size: 14px; color: #9A3412; line-height: 1.6;
}

.ts-prs-cta {
	background: var(--prs-plum-50);
	border: 1px solid var(--prs-plum-200);
	border-radius: var(--prs-r-card);
	padding: 22px; margin-bottom: 4px; text-align: center;
}
.ts-prs-cta p { font-size: 14px; color: var(--prs-ink-700); margin: 0 0 14px; line-height: 1.6; }
.ts-prs-cta__link {
	display: inline-block;
	background: linear-gradient(135deg, var(--prs-plum-600) 0%, var(--prs-plum-700) 100%);
	color: #fff; text-decoration: none;
	padding: 11px 24px; border-radius: var(--prs-r-md); font-size: 14px; font-weight: 600;
	transition: filter 0.2s, box-shadow 0.2s;
}
.ts-prs-cta__link:hover { filter: brightness(1.07); box-shadow: 0 8px 24px rgba(42, 30, 48,.28); color: #fff; }

.ts-prs-ai { margin-top: 24px; }
.ts-prs-ai__label { font-size: 14px; font-weight: 700; color: var(--prs-ink-900); margin-bottom: 4px; }
.ts-prs-ai__sub { font-size: 12px; color: var(--prs-ink-500); margin-bottom: 12px; }
.ts-prs-prompt {
	background: var(--prs-ink-50);
	border: 1px solid var(--prs-ink-200); border-radius: var(--prs-r-md);
	padding: 16px; font-family: var(--prs-font-mono); font-size: 12px;
	color: var(--prs-ink-700); white-space: pre-wrap; line-height: 1.7;
	max-height: 280px; overflow-y: auto;
}
.ts-prs-copy {
	margin-top: 10px; background: transparent;
	border: 1px solid var(--prs-ink-200); color: var(--prs-ink-500);
	border-radius: var(--prs-r-md); padding: 9px 18px; font-family: inherit;
	font-size: 13px; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.ts-prs-copy:hover { border-color: var(--prs-plum-500); color: var(--prs-plum-600); }

.ts-prs-divider { border: none; border-top: 1px solid var(--prs-ink-200); margin: 24px 0; }

/* ── Errors + footer ──────────────────────────────────────────────────── */
.ts-prs-error {
	background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--prs-r-md);
	padding: 12px 16px; margin-top: 4px; margin-bottom: 4px; font-size: 13px; color: #B91C1C;
}
.ts-prs-foot {
	max-width: 800px; margin: 18px auto 0; text-align: center;
	font-size: 12px; color: var(--prs-ink-400);
}
.ts-prs-foot a { color: var(--prs-ink-500); }

/* Visually-hidden honeypot wrapper (class defined by ts-core.js markup). */
.ts-core-hp {
	position: absolute !important; left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 560px) {
	#ts-prs-app { padding: 20px 16px 24px; }
	.ts-prs-item__grid { grid-template-columns: 1fr; }
	.ts-prs-result-row { flex-wrap: wrap; }

	/* One column on a phone. The axis captions describe a 2x2 that is no
	   longer there, so they come out rather than mislead. */
	.ts-prs-matrix-wrap { grid-template-columns: minmax(0, 1fr); }
	.ts-prs-matrix { grid-column: 1; grid-template-columns: 1fr; }
	.ts-prs-matrix-axis { display: none; }
}