/* tools.css - the /tools workspace and landing pages.
   Everything rides the global tokens, so light/dark both come from
   global.css. Flat chrome rules apply: radius tokens only, hover feedback
   is border/tint change, selection is a symmetric ring. */

/* Several tools elements use display:flex/grid, which outranks the UA
   stylesheet's [hidden] rule; restore the attribute's meaning here. */
.tools-page-wrap [hidden],
.tools-crop-overlay [hidden] {
	display: none !important;
}

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

.tools-page-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: var(--page-padding);
}

.tools-page-wrap h1 {
	margin: 0 0 0.9rem;
	font-size: var(--fs-2xl);
}

/* --- intake ------------------------------------------------------------ */

.tools-drop {
	border: 1px dashed var(--form_border);
	border-radius: var(--radius-md);
	background: var(--contents);
	padding: 1.6rem 1rem;
	text-align: center;
	margin-bottom: 1rem;
}

.tools-drop--over {
	border-color: var(--dark_blue);
	background: color-mix(in srgb, var(--dark_blue) 8%, var(--contents));
}

.tools-drop__main { margin: 0 0 0.3rem; font-size: var(--fs-md); }

.tools-drop__pick {
	color: var(--dark_blue);
	text-decoration: underline;
	cursor: pointer;
}

.tools-drop__pick:focus-visible,
.tools-page:focus-visible,
.tools-crop-canvas:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dark_blue) 45%, transparent);
}

.tools-drop__formats { margin: 0; color: var(--form_text); font-size: var(--fs-sm); }

/* --- alerts, warnings, hints ------------------------------------------- */

.tools-alert {
	border: 1px solid var(--badge-error-border);
	background: var(--badge-error-bg);
	color: var(--badge-error-text);
	border-radius: var(--radius-sm);
	padding: 0.5rem 0.7rem;
	margin-bottom: 0.8rem;
}

.tools-warnings { margin: 0.6rem 0; }

.tools-warning {
	border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
	background: color-mix(in srgb, var(--warning) 10%, var(--contents));
	border-radius: var(--radius-sm);
	padding: 0.4rem 0.6rem;
	margin: 0.3rem 0;
	font-size: var(--fs-sm);
}

.tools-hint {
	display: block;
	color: var(--form_text);
	font-size: var(--fs-xs);
	margin-top: 0.15rem;
}

/* --- file list ---------------------------------------------------------- */

.tools-files {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--contents);
}

.tools-file {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.45rem 0.6rem;
	border-bottom: 1px solid var(--border);
}

.tools-file:last-child { border-bottom: 0; }

.tools-file--error { background: var(--badge-error-bg); }

.tools-file__thumb {
	flex: 0 0 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		conic-gradient(var(--border) 25%, transparent 0 50%, var(--border) 0 75%, transparent 0) 0 0 / 12px 12px,
		var(--contents);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.tools-file__thumb img { max-width: 100%; max-height: 100%; }

.tools-file__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.tools-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tools-file__meta { color: var(--form_text); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.tools-file__err { color: var(--badge-error-text); font-size: var(--fs-xs); }

.tools-file__controls { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }

.tools-iconbtn {
	font: inherit;
	font-size: var(--fs-xs);
	padding: 0.15rem 0.45rem;
	background: var(--contents);
	color: inherit;
	border: 1px solid var(--form_border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.tools-iconbtn:hover {
	border-color: var(--dark_blue);
	background: color-mix(in srgb, var(--dark_blue) 8%, var(--contents));
}

.tools-iconbtn:disabled { opacity: 0.45; cursor: default; }

.tools-iconbtn:disabled:hover { border-color: var(--form_border); background: var(--contents); }

/* --- panel -------------------------------------------------------------- */

.tools-panel {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--contents);
	padding: 0.85rem;
	margin-bottom: 1rem;
}

.tools-panel__grid { display: flex; flex-direction: column; gap: 0.65rem; }

.tools-field { display: flex; flex-direction: column; gap: 0.2rem; max-width: 26rem; }

.tools-field > label { font-size: var(--fs-sm); color: var(--form_text); }

.tools-field input[type="text"],
.tools-field input[type="number"],
.tools-field select {
	font: inherit;
	font-size: var(--fs-base);
	padding: 0.3rem 0.45rem;
	border: 1px solid var(--form_border);
	border-radius: var(--radius-sm);
	background: var(--form_body);
	color: var(--form_text);
}

.tools-field input[type="range"] { max-width: 18rem; }

.tools-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

.tools-field input[type="number"]::-webkit-outer-spin-button,
.tools-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tools-advanced { border-top: 1px solid var(--border); padding-top: 0.5rem; }

.tools-advanced summary { cursor: pointer; font-size: var(--fs-sm); color: var(--form_text); }

.tools-advanced > *:not(summary) { margin-top: 0.55rem; }

.tools-btnrow { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* --- export bar --------------------------------------------------------- */

.tools-export {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--contents);
	padding: 0.85rem;
	margin-bottom: 1.25rem;
}

.tools-export__row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 0.6rem;
}

.tools-export__spacer { flex: 1 1 auto; }

.tools-name-input { max-width: 22rem; }

.tools-progress-wrap { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.6rem; }

.tools-progress { flex: 0 1 22rem; accent-color: var(--dark_blue); }

.tools-progress-note { font-size: var(--fs-xs); color: var(--form_text); font-variant-numeric: tabular-nums; }

.tools-result { margin: 0.6rem 0 0; font-size: var(--fs-sm); }

/* --- page grid (organize / merge) --------------------------------------- */

.tools-gridbar { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.5rem; }

.tools-gridbar .tools-hint { margin: 0 0 0 auto; }

.tools-pagegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.6rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--contents);
	padding: 0.6rem;
	margin-bottom: 0.4rem;
}

.tools-page {
	position: relative;
	border: 1px solid var(--form_border);
	border-radius: var(--radius-sm);
	background: var(--background);
	padding: 0.35rem;
	cursor: grab;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.tools-page:hover { border-color: var(--dark_blue); }

.tools-page--selected {
	border-color: var(--dark_blue);
	background: color-mix(in srgb, var(--dark_blue) 10%, var(--background));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--dark_blue) 40%, transparent);
}

.tools-page--droptarget { border-style: dashed; border-color: var(--dark_blue); }

.tools-page__frame {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--contents);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.tools-page__frame img { max-width: 100%; max-height: 100%; }

.tools-page__blank,
.tools-page__loading { color: var(--form_text); font-size: var(--fs-xs); }

.tools-page__num {
	font-size: var(--fs-xs);
	color: var(--form_text);
	font-variant-numeric: tabular-nums;
}

/* --- compress compare --------------------------------------------------- */

.tools-compare { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.tools-compare figure { margin: 0; max-width: 320px; }

.tools-compare img {
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background:
		conic-gradient(var(--border) 25%, transparent 0 50%, var(--border) 0 75%, transparent 0) 0 0 / 14px 14px,
		var(--contents);
}

.tools-compare figcaption { font-size: var(--fs-xs); color: var(--form_text); font-variant-numeric: tabular-nums; }

/* --- crop dialog --------------------------------------------------------- */

.tools-crop-overlay {
	position: fixed;
	inset: 0;
	background: var(--modal-backdrop);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.tools-crop-box {
	background: var(--contents);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: 0.9rem;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.tools-crop-canvas {
	touch-action: none;
	background:
		conic-gradient(var(--border) 25%, transparent 0 50%, var(--border) 0 75%, transparent 0) 0 0 / 14px 14px,
		var(--contents);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: crosshair;
	max-width: 100%;
}

.tools-crop-actions { justify-content: flex-end; }

/* --- tools menu (landing) ------------------------------------------------ */

.tools-menu { margin: 0 0 1.4rem; }

.tools-menu h2 {
	margin: 0 0 0.5rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--form_text);
}

.tools-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.6rem;
}

.tools-tile {
	display: block;
	padding: 0.85rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--contents);
	color: var(--default);
	text-decoration: none;
	font-size: var(--fs-md);
}

.tools-tile:hover {
	border-color: var(--dark_blue);
	background: color-mix(in srgb, var(--dark_blue) 8%, var(--contents));
}

.tools-tile:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dark_blue) 45%, transparent);
}

.tools-back { margin: 0 0 0.3rem; font-size: var(--fs-sm); }

.tools-back a { color: var(--dark_blue); text-decoration: none; }

.tools-back a:hover { text-decoration: underline; }

.tools-related { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.4rem; }

.tools-related a {
	border: 1px solid var(--form_border);
	border-radius: var(--radius-sm);
	padding: 0.2rem 0.55rem;
	color: var(--dark_blue);
	text-decoration: none;
	font-size: var(--fs-sm);
}

.tools-related a:hover {
	border-color: var(--dark_blue);
	background: color-mix(in srgb, var(--dark_blue) 8%, var(--contents));
}

/* --- responsive / preferences ------------------------------------------- */

@media (max-width: 640px) {
	.tools-pagegrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
	.tools-file { flex-wrap: wrap; }
	.tools-file__controls { width: 100%; justify-content: flex-start; }
}

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

/* --- overlay tools (add-text / page-numbers / watermark) ----------------- */

.tools-ovpreview { margin-top: 0.4rem; }

.tools-ovnav { align-items: center; margin-bottom: 0.4rem; }

.tools-ovstage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--background);
	line-height: 0;
}

.tools-ovcanvas { display: block; max-width: 100%; }

.tools-ovlayer {
	position: absolute;
	inset: 0 auto auto 0;
	line-height: normal;
}

.tools-ovlayer--drawing { cursor: crosshair; }

.tools-ovsvg { position: absolute; inset: 0; pointer-events: none; }

.tools-ovsvg .tools-ovshape { pointer-events: stroke; cursor: pointer; }

.tools-ovsvg .tools-ovshape--selected { outline: none; }

.tools-ovtext {
	position: absolute;
	border: 1px dashed color-mix(in srgb, var(--dark_blue) 55%, transparent);
	background: color-mix(in srgb, var(--dark_blue) 4%, transparent);
}

.tools-ovtext--selected {
	border-style: solid;
	border-color: var(--dark_blue);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--dark_blue) 35%, transparent);
}

.tools-ovtext__edit {
	min-height: 1em;
	outline: none;
	padding: 2px;
	overflow-wrap: break-word;
	line-height: 1.25;
}

.tools-ovtext__grip {
	position: absolute;
	top: -1.15rem;
	left: -1px;
	font: inherit;
	font-size: var(--fs-xs);
	line-height: 1;
	padding: 0.05rem 0.3rem;
	background: var(--dark_blue);
	color: #ffffff;
	border: 0;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	cursor: grab;
}

.tools-ovtext__resize {
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 10px;
	height: 10px;
	background: var(--dark_blue);
	border-radius: 50%;
	cursor: nwse-resize;
}

.tools-inspector {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--background);
	padding: 0.7rem;
}

.tools-inspector__title { margin: 0 0 0.5rem; font-size: var(--fs-md); }

.tools-scope { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.tools-scope input[type="text"] {
	font: inherit;
	font-size: var(--fs-base);
	padding: 0.3rem 0.45rem;
	border: 1px solid var(--form_border);
	border-radius: var(--radius-sm);
	background: var(--form_body);
	color: var(--form_text);
}

/* --- background removal --------------------------------------------------- */

.tools-bg-canvas {
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	display: block;
}

.tools-bg-canvas--checker {
	background:
		conic-gradient(var(--border) 25%, transparent 0 50%, var(--border) 0 75%, transparent 0) 0 0 / 14px 14px,
		var(--contents);
}

.tools-bg-swatch {
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--form_border);
	border-radius: var(--radius-sm);
	background: var(--contents);
	vertical-align: middle;
}

.tools-bg-picking {
	border-color: var(--dark_blue);
	background: color-mix(in srgb, var(--dark_blue) 10%, var(--contents));
}

.tools-bg-refine-scroll {
	overflow: auto;
	max-width: calc(100vw - 80px);
	max-height: calc(100vh - 280px);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.tools-bg-refine-scroll canvas { cursor: crosshair; touch-action: none; display: block; }

.tools-bg-sliderlabel {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-sm);
	color: var(--form_text);
}