/* OpenPress Image Compressor interface (foundation, file validation and list, compression trigger/status, results, ZIP, reset, 037E polish). Loaded on the Image Compressor Free Tool
   page only, after free-tool-single.css, inside the .op-free-tool-interface frame. Uses existing tokens and the existing
   .op-btn; the only addition is one scoped error colour (the theme has none) with light and dark values, defined the same
   way components.css defines --op-on-accent. No animation beyond the theme's own transition token. */

/* Scoped semantic tokens: error and success accents (the theme has neither). Light and dark values are AA as text on their tinted panel backgrounds. */
.op-imgc { --op-imgc-error: #B42318; --op-imgc-success: #067647; --op-imgc-zone: #F1F3F5; }
@media (prefers-color-scheme: dark) {
	.op-imgc { --op-imgc-error: #F97066; --op-imgc-success: #47CD89; --op-imgc-zone: #171D33; }
	:root[data-theme="light"] .op-imgc { --op-imgc-error: #B42318; --op-imgc-success: #067647; --op-imgc-zone: #F1F3F5; }
}
:root[data-theme="dark"] .op-imgc { --op-imgc-error: #F97066; --op-imgc-success: #47CD89; --op-imgc-zone: #171D33; }

.op-imgc { display: grid; gap: 1.5rem; min-width: 0; }

/* Tool heading and one-line description: the same block every other tool opens with. */
.op-imgc__intro { display: grid; gap: 0.25rem; min-width: 0; }
.op-imgc__heading { margin: 0; color: var(--op-text); font-family: var(--op-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; }
.op-imgc__lede { margin: 0; color: var(--op-text-muted); font-size: 0.875rem; line-height: 1.4; }

/* Upload zone ------------------------------------------------------------- */
/* The whole zone is the click target: the label's ::after stretches over it (same technique as the card links). */
.op-imgc__dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--op-space-4);
	min-width: 0;
	padding: var(--op-space-6) var(--op-space-4);
	background: var(--op-imgc-zone);
	border: 1.5px dashed var(--op-border-strong);
	border-radius: 1.25rem;
	text-align: center;
	transition: border-color var(--op-transition), background-color var(--op-transition);
}
.op-imgc__dropzone:hover { border-color: var(--op-link); }
/* Busy with the current files, or the browser cannot compress: the zone looks inactive and does not offer a picker. */
.op-imgc__dropzone.is-disabled { opacity: 0.6; border-color: var(--op-border-strong); }
.op-imgc__dropzone.is-disabled:hover { border-color: var(--op-border-strong); }
.op-imgc__dropzone.is-disabled .op-imgc__label { cursor: not-allowed; }
.op-imgc__dropzone.is-disabled .op-imgc__choose { opacity: 0.6; }
.op-imgc__dropzone.is-dragover {
	border-style: solid;
	border-color: var(--op-link);
	background: color-mix(in srgb, var(--op-link) 8%, var(--op-bg-elevated));
}

/* The real file input stays in the accessibility tree and the tab order; it is only visually hidden. */
.op-imgc__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	clip-path: inset(50%);
	pointer-events: none;
}

.op-imgc__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--op-space-3);
	max-width: 100%;
	cursor: pointer;
}
.op-imgc__label::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
/* Visible keyboard focus: a ring around the whole zone. */
.op-imgc__input:focus-visible + .op-imgc__label::after {
	outline: 2px solid var(--op-focus);
	outline-offset: 3px;
}

.op-imgc__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--op-radius-pill);
	background: color-mix(in srgb, var(--op-link) 14%, transparent);
	color: var(--op-link);
}
.op-imgc__title {
	color: var(--op-text);
	font-size: var(--op-text-h3);
	font-weight: var(--op-weight-semibold);
	line-height: var(--op-leading-snug);
	overflow-wrap: anywhere;
}
.op-imgc__or { color: var(--op-text-muted); font-size: var(--op-text-small); }
/* A span styled as the theme's button: the label is what is clickable, so this must not be a second control. */
.op-imgc__choose { min-width: 10rem; pointer-events: none; }
.op-imgc__dropzone:not(.is-disabled) .op-imgc__label:hover .op-imgc__choose { background: color-mix(in srgb, var(--op-link) 86%, var(--op-text)); }

.op-imgc__hint { display: grid; gap: var(--op-space-1); max-width: 100%; color: var(--op-text-muted); font-size: var(--op-text-small); }
.op-imgc__hint p { margin: 0; overflow-wrap: anywhere; }
.op-imgc__formats { color: var(--op-text); font-weight: var(--op-weight-medium); }
/* Privacy line: part of the hint block, so it is seen before any file is chosen. Muted but AA, with a hairline to set it apart. */
.op-imgc__hint .op-imgc__trust {
	margin-top: var(--op-space-2);
	padding-top: var(--op-space-2);
	border-top: 1px solid var(--op-border);
	color: var(--op-text-muted);
	font-size: var(--op-text-meta);
}

/* Rejected files ---------------------------------------------------------- */
.op-imgc__problems {
	min-width: 0;
	padding: var(--op-space-3) var(--op-space-4);
	background: color-mix(in srgb, var(--op-imgc-error) 8%, var(--op-bg-elevated));
	border: 1px solid color-mix(in srgb, var(--op-imgc-error) 45%, var(--op-border));
	border-left-width: 4px;
	border-radius: var(--op-radius);
}
.op-imgc__problems[hidden] { display: none; }
.op-imgc__unsupported { margin: 0; color: var(--op-text); font-size: var(--op-text-small); font-weight: var(--op-weight-medium); }
.op-imgc__problems-title { margin: 0 0 var(--op-space-2); color: var(--op-imgc-error); font-size: var(--op-text-small); font-weight: var(--op-weight-semibold); }
.op-imgc__problems-list { display: grid; gap: var(--op-space-2); margin: 0; padding: 0; list-style: none; }
.op-imgc__problem { display: grid; gap: 0; min-width: 0; font-size: var(--op-text-small); }
.op-imgc__problem-name { color: var(--op-text); font-weight: var(--op-weight-medium); overflow-wrap: anywhere; }
/* Main text colour, not muted: muted grey on the tinted panel is below AA in light mode. */
.op-imgc__problem-reason { color: var(--op-text); }

/* Selected files: count, then the list ------------------------ */
.op-imgc__files { display: grid; gap: var(--op-space-3); min-width: 0; }
.op-imgc__files[hidden],
.op-imgc__actions[hidden] { display: none; }

.op-imgc__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--op-space-3); min-width: 0; }
.op-imgc__status { margin: 0; min-width: 0; color: var(--op-text); font-size: var(--op-text-small); font-weight: var(--op-weight-semibold); overflow-wrap: anywhere; }

/* Progress while compressing */
.op-imgc__progress { display: grid; gap: var(--op-space-2); min-width: 0; }
.op-imgc__progress[hidden] { display: none; }
.op-imgc__progress-text { margin: 0; color: var(--op-text); font-size: var(--op-text-small); font-weight: var(--op-weight-medium); overflow-wrap: anywhere; }
.op-imgc__progress-bar {
	display: block;
	width: 100%;
	height: 0.5rem;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: var(--op-radius-pill);
	background: color-mix(in srgb, var(--op-text) 10%, var(--op-bg-elevated));
	overflow: hidden;
}
.op-imgc__progress-bar::-webkit-progress-bar { background: transparent; }
.op-imgc__progress-bar::-webkit-progress-value { background: var(--op-link); border-radius: var(--op-radius-pill); transition: width var(--op-transition); }
.op-imgc__progress-bar::-moz-progress-bar { background: var(--op-link); border-radius: var(--op-radius-pill); }

.op-imgc__list { display: grid; gap: var(--op-space-3); margin: 0; padding: 0; list-style: none; min-width: 0; }
.op-imgc__item {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--op-space-3);
	min-width: 0;
	padding: var(--op-space-3) var(--op-space-4) var(--op-space-3) var(--op-space-3);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-left-width: 4px;
	border-radius: var(--op-radius);
	box-shadow: var(--op-shadow-sm);
	transition: border-color var(--op-transition);
}
/* Small fixed box: the browser scales the local preview down, nothing larger is ever laid out. */
.op-imgc__thumb {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--op-text) 6%, var(--op-bg-elevated));
	border-radius: var(--op-radius-sm);
	color: var(--op-text-muted);
}
.op-imgc__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.op-imgc__info { display: grid; gap: var(--op-space-1); min-width: 0; }
/* Long names wrap anywhere and stop after two lines; the full name is in the title attribute and the remove label. */
.op-imgc__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--op-text);
	font-size: var(--op-text-small);
	font-weight: var(--op-weight-medium);
	line-height: var(--op-leading-snug);
	overflow-wrap: anywhere;
}
.op-imgc__meta { color: var(--op-text-muted); font-size: var(--op-text-small); }

/* 44px square tap target. */
.op-imgc__remove {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--op-radius);
	color: var(--op-text-muted);
	cursor: pointer;
	transition: background-color var(--op-transition), border-color var(--op-transition), color var(--op-transition);
}
.op-imgc__remove:disabled { opacity: 0.4; cursor: not-allowed; }
.op-imgc__remove:not(:disabled):hover {
	background: color-mix(in srgb, var(--op-imgc-error) 10%, transparent);
	border-color: color-mix(in srgb, var(--op-imgc-error) 45%, var(--op-border));
	color: var(--op-imgc-error);
}

/* Visible keyboard focus on the buttons: one solid, full-strength ring (the global ring is semi-transparent). */
.op-imgc__remove:focus-visible,
.op-imgc__compress:focus-visible {
	outline: 3px solid var(--op-focus);
	outline-offset: 2px;
}

/* Compress button and per-file status (temporary, minimal: the results UI is a later task) ----------- */
.op-imgc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-space-3); min-width: 0; }
.op-imgc__compress { min-width: 10rem; }
.op-imgc__note { margin: 0; min-width: 0; color: var(--op-imgc-error); font-size: var(--op-text-small); overflow-wrap: anywhere; }
.op-imgc__note[hidden] { display: none; }

/* Status row: a badge (short label) and the sentence that explains it. Colour is never the only signal: the label is text. */
.op-imgc__statusrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-space-1) var(--op-space-2); min-width: 0; }
.op-imgc__item[data-status="selected"] .op-imgc__statusrow { display: none; }
.op-imgc__state {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.125rem 0.625rem;
	background: color-mix(in srgb, var(--op-text) 7%, var(--op-bg-elevated));
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-pill);
	color: var(--op-text);
	font-size: var(--op-text-meta);
	font-weight: var(--op-weight-semibold);
	line-height: 1.5;
	white-space: nowrap;
}
.op-imgc__state[hidden],
.op-imgc__message[hidden] { display: none; }
.op-imgc__message { min-width: 0; color: var(--op-text); font-size: var(--op-text-small); overflow-wrap: anywhere; }

.op-imgc__item[data-status="processing"] { border-left-color: var(--op-link); }
.op-imgc__item[data-status="processing"] .op-imgc__state { color: var(--op-link); border-color: color-mix(in srgb, var(--op-link) 40%, var(--op-border)); background: color-mix(in srgb, var(--op-link) 8%, var(--op-bg-elevated)); }
.op-imgc__item[data-status="completed"] { border-left-color: var(--op-imgc-success); }
.op-imgc__item[data-status="completed"] .op-imgc__state { color: var(--op-imgc-success); border-color: color-mix(in srgb, var(--op-imgc-success) 40%, var(--op-border)); background: color-mix(in srgb, var(--op-imgc-success) 8%, var(--op-bg-elevated)); }
.op-imgc__item[data-status="unchanged"] { border-left-color: var(--op-border-strong); }
.op-imgc__item[data-status="error"] { border-color: color-mix(in srgb, var(--op-imgc-error) 45%, var(--op-border)); border-left-color: var(--op-imgc-error); }
.op-imgc__item[data-status="error"] .op-imgc__state { color: var(--op-imgc-error); border-color: color-mix(in srgb, var(--op-imgc-error) 40%, var(--op-border)); background: color-mix(in srgb, var(--op-imgc-error) 8%, var(--op-bg-elevated)); }
.op-imgc__item[data-status="error"] .op-imgc__message { color: var(--op-imgc-error); }

/* Spinner on the "Compressing…" badge and button. Pure CSS, removed under reduced motion. */
.op-imgc__item[data-status="processing"] .op-imgc__state::before,
.op-imgc__compress[aria-busy="true"]::before {
	content: "";
	width: 0.85em;
	height: 0.85em;
	flex: none;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: op-imgc-spin 0.8s linear infinite;
}
@keyframes op-imgc-spin { to { transform: rotate(360deg); } }

/* Compress, ZIP and Reset -------------------------------------------------------------------------- */
.op-imgc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-space-3); min-width: 0; }
.op-imgc__compress { min-width: 10rem; }
.op-imgc__compress[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.op-imgc__note { margin: 0; flex: 1 1 100%; min-width: 0; color: var(--op-imgc-error); font-size: var(--op-text-small); font-weight: var(--op-weight-medium); overflow-wrap: anywhere; }
.op-imgc__note--info { color: var(--op-text); }
.op-imgc__note[hidden] { display: none; }

/* Results, total line, Download all, Reset (037D) ----------------------------------------------------- */
.op-imgc__compress[hidden],
.op-imgc__zip[hidden],
.op-imgc__total[hidden],
.op-imgc__result[hidden] { display: none; }

.op-imgc__total {
	margin: 0;
	min-width: 0;
	padding: var(--op-space-3) var(--op-space-4);
	background: color-mix(in srgb, var(--op-link) 8%, var(--op-bg-elevated));
	border: 1px solid color-mix(in srgb, var(--op-link) 35%, var(--op-border));
	border-radius: var(--op-radius);
	color: var(--op-text);
	font-size: var(--op-text-small);
	font-weight: var(--op-weight-semibold);
	line-height: var(--op-leading-snug);
	overflow-wrap: anywhere;
}

/* Per-file results: a full-width panel inside the card (label/value pairs that wrap, then the Download button). Plain text colours keep AA in both modes. */
.op-imgc__result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--op-space-3) var(--op-space-4);
	grid-column: 1 / -1;
	min-width: 0;
	padding: var(--op-space-3);
	background: color-mix(in srgb, var(--op-text) 3%, var(--op-bg-elevated));
	border-radius: var(--op-radius-sm);
}
.op-imgc__figures { display: flex; flex: 1 1 14rem; flex-wrap: wrap; gap: var(--op-space-2) var(--op-space-5); margin: 0; padding: 0; min-width: 0; }
.op-imgc__figure { display: grid; gap: 0; min-width: 0; }
.op-imgc__figure-label { margin: 0; color: var(--op-text-muted); font-size: var(--op-text-meta); }
.op-imgc__figure-value { margin: 0; color: var(--op-text); font-size: var(--op-text-small); font-weight: var(--op-weight-semibold); overflow-wrap: anywhere; }
.op-imgc__figure--saved .op-imgc__figure-value { color: var(--op-imgc-success); }

.op-imgc__download { flex: none; max-width: 100%; min-height: 2.75rem; padding: 0 1.25rem; text-decoration: none; }

/* Download all and Reset sit with Compress; they wrap onto their own lines on narrow screens. */
.op-imgc__zip,
.op-imgc__reset { min-width: 8rem; }
.op-imgc__zip[aria-busy="true"] { opacity: 0.85; cursor: progress; }

.op-imgc__download:focus-visible,
.op-imgc__zip:focus-visible,
.op-imgc__reset:focus-visible {
	outline: 3px solid var(--op-focus);
	outline-offset: 2px;
}


@media (max-width: 479px) {
	/* Full-width action buttons are easier to tap on phones. */
	.op-imgc__actions .op-btn { flex: 1 1 100%; }
	.op-imgc__download { flex: 1 1 100%; }
	.op-imgc__item { padding-right: var(--op-space-2); }
	.op-imgc__figures { gap: var(--op-space-2) var(--op-space-4); }
}

@media (prefers-reduced-motion: reduce) {
	.op-imgc__item[data-status="processing"] .op-imgc__state::before,
	.op-imgc__compress[aria-busy="true"]::before { animation: none; border-right-color: currentColor; }
	.op-imgc__progress-bar::-webkit-progress-value { transition: none; }
}

@media (min-width: 768px) {
	.op-imgc__dropzone { gap: var(--op-space-5); padding: var(--op-space-8) var(--op-space-6); }
	.op-imgc__icon { width: 4rem; height: 4rem; }
}

/* Task 051: very narrow phones (about 360px and below). The "Compressing…" pill is nowrap and was wider than the
   file row's text column, so it ran into the remove button. Tighter row, and the decorative spinner is dropped
   (the status text stays). */
@media (max-width: 380px) {
	.op-imgc__item { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--op-space-2); }
	.op-imgc__thumb { width: 3rem; height: 3rem; }
	.op-imgc__state { padding-inline: 0.5rem; }
	.op-imgc__item[data-status="processing"] .op-imgc__state::before { display: none; }
}