/*!
 * Razor Sharp Image — front-end styles
 * Author: Noam Nizzani
 *
 * Every selector is scoped under .rsimg-app and every class is namespaced with
 * `rsimg-`, so nothing here can leak into — or be inherited from — the theme.
 *
 * TYPE SCALE (fixed 16px root so a theme's font-size cannot distort it)
 *   Title        22px / 1.2   700  -0.02em
 *   Subtitle     15px / 1.55  400  -0.005em
 *   Filename     17px / 1.35  600  -0.011em
 *   Label        11px / 1.4   700  +0.09em  uppercase
 *   Value        21px / 1.2   600  -0.015em tabular numerals
 *   Caption      12px / 1.5   400   0       monospace
 */

.rsimg-app {
	/* ---- Type ---- */
	--rsimg-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--rsimg-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
		Consolas, "Liberation Mono", monospace;

	/* ---- Light palette (default) ---- */
	--rsimg-bg-soft: #f5f6f8;
	--rsimg-card: #ffffff;
	--rsimg-ink: #0a0c0f;          /* 19.6:1 on white */
	--rsimg-ink-soft: #4b525c;     /*  8.2:1 on white */
	--rsimg-ink-faint: #6b737e;    /*  5.1:1 on white */
	--rsimg-line: #dcdfe4;
	--rsimg-line-strong: #0a0c0f;
	--rsimg-accent: #1449e6;
	--rsimg-accent-soft: #e9eeff;
	--rsimg-good: #0a6b41;
	--rsimg-warn: #7a4600;
	--rsimg-danger: #a81f16;
	--rsimg-danger-soft: #fdecea;

	--rsimg-radius: 14px;
	--rsimg-radius-sm: 9px;
	--rsimg-shadow: 0 1px 2px rgba(10, 12, 15, .05), 0 10px 28px rgba(10, 12, 15, .06);

	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
	color: var(--rsimg-ink);
	background: transparent;

	font-family: var(--rsimg-sans);
	font-size: 16px;      /* Anchors the whole em-based scale. */
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	font-variant-numeric: tabular-nums;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

/* Opt out of the bundled stack: [image_profile_checker font="theme"] */
.rsimg-app[data-font="theme"] {
	--rsimg-sans: inherit;
}

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

/* ---- Dark palette ---- */
.rsimg-app[data-theme="dark"] {
	--rsimg-bg-soft: #171b21;
	--rsimg-card: #10141a;
	--rsimg-ink: #f6f8fa;
	--rsimg-ink-soft: #b0b9c5;
	--rsimg-ink-faint: #868f9c;
	--rsimg-line: #2b323c;
	--rsimg-line-strong: #f6f8fa;
	--rsimg-accent: #8fadff;
	--rsimg-accent-soft: #1a2340;
	--rsimg-good: #52dd9c;
	--rsimg-warn: #f2c56a;
	--rsimg-danger: #ff9b91;
	--rsimg-danger-soft: #2a1614;
	--rsimg-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 12px 32px rgba(0, 0, 0, .45);

	/* Light-on-dark needs the thinner rasterisation to avoid looking bold. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
	.rsimg-app[data-theme="auto"] {
		--rsimg-bg-soft: #171b21;
		--rsimg-card: #10141a;
		--rsimg-ink: #f6f8fa;
		--rsimg-ink-soft: #b0b9c5;
		--rsimg-ink-faint: #868f9c;
		--rsimg-line: #2b323c;
		--rsimg-line-strong: #f6f8fa;
		--rsimg-accent: #8fadff;
		--rsimg-accent-soft: #1a2340;
		--rsimg-good: #52dd9c;
		--rsimg-warn: #f2c56a;
		--rsimg-danger: #ff9b91;
		--rsimg-danger-soft: #2a1614;
		--rsimg-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 12px 32px rgba(0, 0, 0, .45);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

/* Reset the handful of elements themes love to restyle. */
.rsimg-app p,
.rsimg-app h3,
.rsimg-app dl,
.rsimg-app dt,
.rsimg-app dd,
.rsimg-app figure {
	margin: 0;
	padding: 0;
	font-family: inherit;
}

/* ---------- Intro ---------- */

.rsimg-app .rsimg-intro {
	margin-bottom: 20px;
}

.rsimg-app .rsimg-title {
	font-size: 1.375em;      /* 22px */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--rsimg-ink);
	text-wrap: balance;
}

.rsimg-app .rsimg-subtitle {
	margin-top: 7px;
	max-width: 62ch;         /* Measure held to a comfortable reading line. */
	font-size: .9375em;      /* 15px */
	line-height: 1.55;
	letter-spacing: -.005em;
	color: var(--rsimg-ink-soft);
	text-wrap: pretty;
}

/* ---------- Drop zone ---------- */

.rsimg-app .rsimg-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 216px;
	padding: 34px 24px;
	border: 2px dashed var(--rsimg-line);
	border-radius: var(--rsimg-radius);
	background: var(--rsimg-bg-soft);
	color: var(--rsimg-ink);
	text-align: center;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}

.rsimg-app .rsimg-dropzone:hover {
	border-color: var(--rsimg-accent);
}

.rsimg-app .rsimg-dropzone:focus-within {
	outline: 3px solid var(--rsimg-accent);
	outline-offset: 3px;
}

.rsimg-app .rsimg-dropzone.is-dragover {
	border-color: var(--rsimg-accent);
	border-style: solid;
	background: var(--rsimg-accent-soft);
}

.rsimg-app .rsimg-dz-icon {
	display: block;
	margin-bottom: 14px;
	color: var(--rsimg-accent);
	line-height: 0;
}

.rsimg-app .rsimg-dz-title {
	font-size: 1.0625em;     /* 17px */
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.012em;
	color: var(--rsimg-ink);
}

.rsimg-app .rsimg-dz-sub {
	margin-top: 4px;
	font-size: .9375em;      /* 15px */
	line-height: 1.45;
	color: var(--rsimg-ink-soft);
}

.rsimg-app .rsimg-dz-link {
	color: var(--rsimg-accent);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.rsimg-app .rsimg-dz-formats {
	margin-top: 16px;
	padding: 5px 12px 4px;
	border: 1px solid var(--rsimg-line);
	border-radius: 999px;
	background: var(--rsimg-card);
	font-family: var(--rsimg-mono);
	font-size: .6875em;      /* 11px */
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rsimg-ink-faint);
}

/* Transparent input laid over the zone: click and drop both land on it. */
.rsimg-app .rsimg-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.rsimg-app .rsimg-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Status line ---------- */

.rsimg-app .rsimg-status {
	display: flex;
	align-items: center;
	min-height: 1.5em;
	margin-top: 14px;
	font-size: .8125em;      /* 13px */
	line-height: 1.5;
	letter-spacing: .002em;
	color: var(--rsimg-ink-soft);
}

/* ---------- Results ---------- */

.rsimg-app .rsimg-results {
	display: grid;
	gap: 16px;
}

.rsimg-app .rsimg-results:not(:empty) {
	margin-top: 4px;
}

.rsimg-app .rsimg-card {
	border: 1px solid var(--rsimg-line);
	border-radius: var(--rsimg-radius);
	background: var(--rsimg-card);
	box-shadow: var(--rsimg-shadow);
	overflow: hidden;
	animation: rsimg-in .22s ease both;
}

@keyframes rsimg-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.rsimg-app .rsimg-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--rsimg-line);
	background: var(--rsimg-bg-soft);
}

.rsimg-app .rsimg-thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid var(--rsimg-line);
	border-radius: var(--rsimg-radius-sm);
	/* Checkerboard so transparent PNGs read correctly. */
	background:
		linear-gradient(45deg, rgba(128, 128, 128, .16) 25%, transparent 25%) 0 0 / 12px 12px,
		linear-gradient(-45deg, rgba(128, 128, 128, .16) 25%, transparent 25%) 0 6px / 12px 12px,
		linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, .16) 75%) 6px -6px / 12px 12px,
		linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, .16) 75%) -6px 0 / 12px 12px,
		var(--rsimg-card);
	overflow: hidden;
}

.rsimg-app .rsimg-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	box-shadow: none;
}

.rsimg-app .rsimg-thumb-fallback {
	font-family: var(--rsimg-mono);
	font-size: .625em;       /* 10px */
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--rsimg-ink-faint);
}

.rsimg-app .rsimg-head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.rsimg-app .rsimg-filename {
	font-size: 1.0625em;     /* 17px */
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.011em;
	color: var(--rsimg-ink);
	overflow-wrap: anywhere;
}

.rsimg-app .rsimg-head-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.rsimg-app .rsimg-badge {
	display: inline-block;
	padding: 2px 8px 1px;
	border: 1px solid var(--rsimg-line-strong);
	border-radius: 5px;
	font-family: var(--rsimg-mono);
	font-size: .6875em;      /* 11px */
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rsimg-ink);
}

.rsimg-app .rsimg-badge-note {
	font-size: .75em;        /* 12px */
	line-height: 1.4;
	color: var(--rsimg-ink-faint);
}

.rsimg-app .rsimg-remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--rsimg-line);
	border-radius: 8px;
	background: var(--rsimg-card);
	color: var(--rsimg-ink-soft);
	font-family: var(--rsimg-sans);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: color .14s ease, border-color .14s ease;
}

.rsimg-app .rsimg-remove:hover {
	color: var(--rsimg-danger);
	border-color: var(--rsimg-danger);
}

.rsimg-app .rsimg-remove:focus-visible {
	outline: 2px solid var(--rsimg-accent);
	outline-offset: 2px;
}

/* ---------- Spec grid — the part that has to be legible at a glance ---------- */

.rsimg-app .rsimg-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;                /* Hairline rules, drawn by the grid background. */
	background: var(--rsimg-line);
}

.rsimg-app .rsimg-spec {
	min-width: 0;
	padding: 15px 16px 16px;
	background: var(--rsimg-card);
}

.rsimg-app .rsimg-spec dt {
	font-size: .6875em;      /* 11px */
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .09em;   /* Tracking opened up for small caps-style labels. */
	text-transform: uppercase;
	color: var(--rsimg-ink-faint);
}

.rsimg-app .rsimg-spec dd {
	margin-top: 5px;
	font-size: 1.3125em;     /* 21px */
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
	font-variant-numeric: tabular-nums;
	color: var(--rsimg-ink);
	overflow-wrap: anywhere;
}

.rsimg-app .rsimg-sub {
	display: block;
	margin-top: 6px;
	font-family: var(--rsimg-mono);
	font-size: .5714em;      /* 12px, relative to the 21px value */
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rsimg-ink-faint);
}

.rsimg-app .rsimg-sub.is-good { color: var(--rsimg-good); }
.rsimg-app .rsimg-sub.is-warn { color: var(--rsimg-warn); }

/* Long profile names ("U.S. Web Coated (SWOP) v2") get a step down. */
.rsimg-app .rsimg-spec dd.is-long {
	font-size: 1.0625em;     /* 17px */
	line-height: 1.3;
	letter-spacing: -.008em;
}

.rsimg-app .rsimg-spec dd.is-long .rsimg-sub {
	font-size: .7058em;      /* 12px, relative to the 17px value */
}

@media (max-width: 560px) {
	.rsimg-app .rsimg-specs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Loading state ---------- */

.rsimg-app .rsimg-skeleton {
	display: block;
	width: 60%;
	max-width: 150px;
	height: .9em;
	margin: .16em 0;
	border-radius: 5px;
	background: linear-gradient(90deg,
		var(--rsimg-bg-soft) 25%,
		var(--rsimg-line) 37%,
		var(--rsimg-bg-soft) 63%);
	background-size: 400% 100%;
	animation: rsimg-shimmer 1.3s ease-in-out infinite;
}

@keyframes rsimg-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.rsimg-app .rsimg-spinner {
	flex: 0 0 auto;
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border: 2px solid var(--rsimg-line);
	border-top-color: var(--rsimg-accent);
	border-radius: 50%;
	animation: rsimg-spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.rsimg-app .rsimg-card,
	.rsimg-app .rsimg-skeleton,
	.rsimg-app .rsimg-spinner {
		animation: none;
	}
	.rsimg-app .rsimg-dropzone { transition: none; }
}

/* ---------- Error card ---------- */

.rsimg-app .rsimg-card.is-error {
	border-color: var(--rsimg-danger);
}

.rsimg-app .rsimg-error-body {
	padding: 14px 16px;
	background: var(--rsimg-danger-soft);
	color: var(--rsimg-danger);
	font-size: .875em;       /* 14px */
	line-height: 1.5;
}

/* ---------- Clear button ---------- */

.rsimg-app .rsimg-clear {
	display: inline-block;
	margin-top: 16px;
	padding: 8px 16px 7px;
	border: 1px solid var(--rsimg-line);
	border-radius: 999px;
	background: var(--rsimg-card);
	color: var(--rsimg-ink-soft);
	font-family: var(--rsimg-sans);
	font-size: .8125em;      /* 13px */
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .002em;
	cursor: pointer;
	transition: color .14s ease, border-color .14s ease;
}

.rsimg-app .rsimg-clear:hover {
	color: var(--rsimg-ink);
	border-color: var(--rsimg-line-strong);
}

.rsimg-app .rsimg-clear:focus-visible {
	outline: 2px solid var(--rsimg-accent);
	outline-offset: 2px;
}

/* ---------- Privacy note ---------- */

.rsimg-app .rsimg-privacy {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: .75em;        /* 12px */
	line-height: 1.5;
	letter-spacing: .003em;
	color: var(--rsimg-ink-faint);
}

.rsimg-app .rsimg-privacy svg {
	flex: 0 0 auto;
	color: var(--rsimg-good);
}