/**
 * UniSolvino Tools — core tool styles (v1.0.0)
 *
 * Namespaced under .unisolvino-tools / .ust-* to avoid theme conflicts.
 * No external fonts, images or other assets.
 */

.unisolvino-tools {
	--ust-primary: #2456d6;
	--ust-primary-hover: #1c46b3;
	--ust-text: #1f2937;
	--ust-muted: #6b7280;
	--ust-border: #d1d5db;
	--ust-surface: #ffffff;
	--ust-surface-alt: #f8fafc;
	--ust-radius: 10px;

	box-sizing: border-box;
	max-width: 860px;
	margin: 0 auto;
	padding: 4px;
	color: var(--ust-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, "Noto Sans", "Noto Sans Bengali", sans-serif;
	line-height: 1.6;
}

.unisolvino-tools *,
.unisolvino-tools *::before,
.unisolvino-tools *::after {
	box-sizing: border-box;
}

.unisolvino-tools .ust-tool {
	background: var(--ust-surface);
	border: 1px solid var(--ust-border);
	border-radius: var(--ust-radius);
	padding: 20px;
}

.unisolvino-tools label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.unisolvino-tools textarea,
.unisolvino-tools input[type="text"],
.unisolvino-tools input[type="number"],
.unisolvino-tools input[type="url"],
.unisolvino-tools input[type="email"],
.unisolvino-tools input[type="tel"],
.unisolvino-tools input[type="date"],
.unisolvino-tools input[type="time"],
.unisolvino-tools select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ust-border);
	border-radius: 8px;
	background: var(--ust-surface);
	color: var(--ust-text);
	font: inherit;
}

.unisolvino-tools textarea {
	min-height: 180px;
	resize: vertical;
}

.unisolvino-tools textarea:focus,
.unisolvino-tools input:focus-visible,
.unisolvino-tools select:focus-visible,
.unisolvino-tools button:focus-visible {
	outline: 2px solid var(--ust-primary);
	outline-offset: 2px;
}

.unisolvino-tools .ust-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 4px;
}

.unisolvino-tools .ust-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* touch friendly */
	padding: 10px 18px;
	border: 1px solid var(--ust-primary);
	border-radius: 8px;
	background: var(--ust-primary);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease;
}

.unisolvino-tools .ust-btn:hover {
	background: var(--ust-primary-hover);
	border-color: var(--ust-primary-hover);
}

.unisolvino-tools .ust-btn-secondary {
	background: var(--ust-surface);
	color: var(--ust-primary);
}

.unisolvino-tools .ust-btn-secondary:hover {
	background: var(--ust-surface-alt);
	color: var(--ust-primary-hover);
}

.unisolvino-tools .ust-status {
	min-height: 1.6em;
	margin: 8px 0 0;
	color: var(--ust-muted);
	font-size: 0.95em;
}

.unisolvino-tools .ust-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	margin-top: 16px;
}

.unisolvino-tools .ust-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 12px;
	background: var(--ust-surface-alt);
	border: 1px solid var(--ust-border);
	border-radius: 8px;
	text-align: center;
}

.unisolvino-tools .ust-stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ust-primary);
	overflow-wrap: anywhere;
}

.unisolvino-tools .ust-stat-label {
	font-size: 0.85rem;
	color: var(--ust-muted);
}

.unisolvino-tools .ust-privacy {
	margin: 14px 4px 0;
	font-size: 0.85em;
	color: var(--ust-muted);
}

.unisolvino-tools .ust-noscript,
.unisolvino-tools .ust-error {
	padding: 12px 14px;
	border: 1px solid #f0b429;
	border-radius: 8px;
	background: #fdf3d7;
	color: #6b4e00;
}

.unisolvino-tools .ust-error[hidden] {
	display: none;
}

/* Small screens */
@media (max-width: 480px) {
	.unisolvino-tools .ust-tool {
		padding: 14px;
	}

	.unisolvino-tools .ust-results {
		grid-template-columns: repeat(2, 1fr);
	}

	.unisolvino-tools .ust-btn {
		flex: 1 1 auto;
	}

	/* v3.0.10: wide reference tables (status codes, image-size guides,
	   calendars) scroll horizontally on very narrow phones instead of
	   forcing page-wide horizontal overflow. */
	.unisolvino-tools table.ust-table,
	.unisolvino-tools table.ust-cal {
		display: block;
		overflow-x: auto;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.unisolvino-tools *,
	.unisolvino-tools *::before,
	.unisolvino-tools *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ===== v2.0 generic tool components ===== */

/* Generic tools use the card styling on the wrapper itself. */
.unisolvino-tools.ust-tool {
	background: var(--ust-surface);
	border: 1px solid var(--ust-border);
	border-radius: var(--ust-radius);
	padding: 20px;
	max-width: 900px;
}

.unisolvino-tools .ust-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 8px 0;
	align-items: end;
}

.unisolvino-tools .ust-field {
	margin: 8px 0;
}

.unisolvino-tools input[type="range"] {
	width: 100%;
}

.unisolvino-tools .ust-hint,
.unisolvino-tools small.ust-hint {
	display: block;
	color: var(--ust-muted);
	font-size: .85em;
	margin-top: 4px;
}

.unisolvino-tools .ust-out {
	background: var(--ust-surface-alt);
	border: 1px solid var(--ust-border);
	border-radius: 8px;
	padding: 12px 14px;
	min-height: 2.5em;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: .92em;
	margin-top: 12px;
}

.unisolvino-tools .ust-big-result {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ust-primary);
	background: var(--ust-surface-alt);
	border: 1px solid var(--ust-border);
	border-radius: 8px;
	padding: 12px 16px;
	margin: 12px 0;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.unisolvino-tools .ust-subtitle {
	margin: 16px 0 8px;
	font-size: 1rem;
}

.unisolvino-tools .ust-kv-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	align-items: end;
	margin-bottom: 8px;
}

.unisolvino-tools .ust-keypad {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 6px;
	margin: 10px 0;
}

.unisolvino-tools .ust-keypad .ust-btn {
	min-height: 40px;
	padding: 6px 4px;
	font-size: .9rem;
}

.unisolvino-tools .ust-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0;
}

.unisolvino-tools .ust-swatch {
	width: 46px;
	height: 46px;
	border: 1px solid var(--ust-border);
	border-radius: 8px;
	cursor: pointer;
}

.unisolvino-tools .ust-canvas,
.unisolvino-tools .ust-qr-canvas {
	max-width: 100%;
	border: 1px solid var(--ust-border);
	border-radius: 8px;
	margin: 10px 0;
	display: block;
}

.unisolvino-tools .ust-qr-canvas {
	width: 320px;
	height: 320px;
	image-rendering: pixelated;
}

.unisolvino-tools .ust-preview-box {
	padding: 14px 16px;
	border-radius: 8px;
	border: 1px solid var(--ust-border);
	margin: 10px 0;
	font-weight: 600;
}

.unisolvino-tools .ust-preview-wrap { margin: 10px 0; }

/* SERP preview */
.unisolvino-tools .ust-serp {
	background: #ffffff;
	border: 1px solid var(--ust-border);
	border-radius: 10px;
	padding: 16px;
	margin: 12px 0;
	max-width: 600px;
}
.unisolvino-tools .ust-serp-url { color: #202124; font-size: .85rem; }
.unisolvino-tools .ust-serp-crumb { color: #5f6368; }
.unisolvino-tools .ust-serp-title { color: #1a0dab; font-size: 1.2rem; margin: 2px 0; }
.unisolvino-tools .ust-serp-desc { color: #4d5156; font-size: .9rem; }

/* Social / OG preview */
.unisolvino-tools .ust-og {
	border: 1px solid var(--ust-border);
	border-radius: 10px;
	overflow: hidden;
	margin: 12px 0;
	max-width: 520px;
	background: #f0f2f5;
	display: flex;
}
.unisolvino-tools .ust-og-img {
	width: 130px;
	min-height: 110px;
	background: #d8dde3;
	color: var(--ust-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	flex: none;
}
.unisolvino-tools .ust-og-img img { width: 100%; height: 110px; object-fit: cover; display: block; }
.unisolvino-tools .ust-og-body { padding: 10px 14px; }
.unisolvino-tools .ust-og-site { text-transform: uppercase; color: var(--ust-muted); font-size: .75rem; }
.unisolvino-tools .ust-og-title { font-weight: 700; margin: 2px 0; }
.unisolvino-tools .ust-og-desc { color: var(--ust-muted); font-size: .85rem; }

/* Markdown preview */
.unisolvino-tools .ust-md { line-height: 1.65; }
.unisolvino-tools .ust-md code { background: var(--ust-surface-alt); border: 1px solid var(--ust-border); border-radius: 4px; padding: 1px 5px; }
.unisolvino-tools .ust-md pre.ust-out { margin: 10px 0; }

/* Tables */
.unisolvino-tools table.ust-table,
.unisolvino-tools table.ust-cal {
	border-collapse: collapse;
	width: 100%;
	margin: 10px 0;
	background: var(--ust-surface);
}
.unisolvino-tools table.ust-table th,
.unisolvino-tools table.ust-table td,
.unisolvino-tools table.ust-cal th,
.unisolvino-tools table.ust-cal td {
	border: 1px solid var(--ust-border);
	padding: 8px 10px;
	text-align: left;
	font-size: .92rem;
}
.unisolvino-tools table.ust-cal { max-width: 420px; }
.unisolvino-tools table.ust-cal th, .unisolvino-tools table.ust-cal td { text-align: center; }
.unisolvino-tools .ust-cal-wrap h4 { margin: 10px 0 4px; }

/* Misc */
.unisolvino-tools .ust-meter { height: 10px; border-radius: 6px; background: var(--ust-surface-alt); border: 1px solid var(--ust-border); margin: 10px 0; overflow: hidden; }
.unisolvino-tools .ust-meter-fill { height: 100%; width: 0; background: #16a34a; transition: width .2s ease; }
.unisolvino-tools .ust-tree { font-size: .9rem; margin-top: 10px; }
.unisolvino-tools .ust-tree summary { cursor: pointer; font-weight: 600; }
.unisolvino-tools .ust-tree-leaf { margin: 2px 0 2px 14px; }
.unisolvino-tools .ust-list-item { margin: 4px 0; }
.unisolvino-tools .ust-card-preview { background: #fff; border: 1px solid var(--ust-border); padding: 20px; margin: 10px 0; }
.unisolvino-tools video.ust-canvas { width: 100%; display: none; }

/* ===== v2.1 tools directory ===== */
.unisolvino-tools.ust-directory {
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px;
}
.unisolvino-tools .ust-dir-status {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	background: none;
	border: 0;
	padding: 0;
}
/* v3.0.13: one status area, three states (component-scoped colors only;
 * no global/theme-forcing rules). */
.unisolvino-tools .ust-dir-status.ust-status-normal { color: var(--ust-primary); }
.unisolvino-tools .ust-dir-status.ust-status-searching { color: #ea580c; }
.unisolvino-tools .ust-dir-status.ust-status-complete { color: #16a34a; }
/* Lightweight search-control container (v3.0.11): wraps ONLY the search
 * bar + "BROWSE BY CATEGORY" + category row. Tool cards stay OUTSIDE. */
.unisolvino-tools .ust-dir-controls {
	border: 1px solid var(--ust-border);
	border-radius: 14px;
	background: var(--ust-surface-alt);
	padding: 18px 16px 12px;
	margin: 0 0 20px;
}
.unisolvino-tools .ust-dir-chipslabel {
	margin: 0 0 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--ust-muted);
	text-align: left;
}
/* v3.0.12: category row + left/right scroll buttons sit on one line. */
.unisolvino-tools .ust-dir-chiprow {
	position: relative;
	display: flex;
	/* v3.0.17: top-align the row so the arrows center on the chip line
	   itself; the scrollbar/padding/margin space BELOW the chips must not
	   pull the arrow buttons down (they previously centered on the whole
	   chips margin box and sat ~10px low). */
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}
/* Arrows are pure scroll controls (never filters). Invisible until the
 * enhancement JS marks the root [data-ust-js], so no-JS visitors never
 * see inert controls. v3.0.19: the 34px boxes are RESERVED from the very
 * first paint (visibility, not display) so the pre-JS geometry is
 * pixel-identical to the enhanced layout — this removes the initial
 * page-load width/position flash of the chip list + scrollbar. */
/* v3.0.20: the scroll element's box extends under both arrows so the
 * scrollbar track spans the full navigation width; these masks clip the
 * chip CONTENT out of the two reserved 42px side regions (the category
 * viewport is strictly between the arrows) while leaving the bottom
 * scrollbar strip unmasked. Arrows sit above the masks. */
.unisolvino-tools .ust-dir-chiprow::before,
.unisolvino-tools .ust-dir-chiprow::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 16px; /* v3.0.21: clear gap above the 6px+6px scrollbar strip */
	width: 42px;
	background: var(--ust-surface-alt);
	pointer-events: none;
	z-index: 1;
}
.unisolvino-tools .ust-dir-chiprow::before { left: 0; }
.unisolvino-tools .ust-dir-chiprow::after { right: 0; }
.unisolvino-tools .ust-chip-arrow {
	position: relative;
	z-index: 2;
	display: inline-flex;
	visibility: hidden;
	flex: 0 0 auto;
	width: 34px;
	/* v3.0.17: same vertical box metrics as a chip (7px padding + 20px
	   line box + 1px borders = 36px), top-aligned => the arrow's vertical
	   center always equals the chip row's vertical center, at any width
	   or theme line-height. */
	height: auto;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ust-border);
	background: var(--ust-surface);
	color: var(--ust-text);
	border-radius: 999px;
	font-size: 18px;
	line-height: 20px;
	cursor: pointer;
	padding: 7px 0;
}
.unisolvino-tools[data-ust-js] .ust-chip-arrow {
	visibility: visible;
}
.unisolvino-tools .ust-chip-arrow:disabled {
	opacity: .4;
	cursor: default;
}
.unisolvino-tools .ust-chip-arrow:not(:disabled):hover {
	border-color: var(--ust-primary);
	color: var(--ust-primary);
}
.unisolvino-tools .ust-chip-arrow:focus-visible {
	outline: 2px solid var(--ust-primary);
	outline-offset: 2px;
}
/* v3.0.12: the search bar spans the full control-section width so its
 * edges align with the category row, scrollbar and the tool-card grid. */
.unisolvino-tools .ust-dir-searchwrap {
	max-width: none;
	margin: 0 0 16px;
}
.unisolvino-tools .ust-dir-searchwrap input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--ust-border);
	border-radius: 999px;
	font: inherit;
	background: var(--ust-surface);
}
/* Category row (v3.0.11): ONE horizontal, non-wrapping scrollable line.
 * overflow-x: scroll keeps a thin reserved track visible in ALL states
 * (inactive when everything fits, active on overflow) so Normal /
 * Searching / Search-Complete share identical scrollbar behavior. The
 * first/last auto margins center the row when it fits without breaking
 * scroll reach when it overflows. Vertical growth is impossible. */
.unisolvino-tools .ust-dir-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-width: 0;
	/* v3.0.18: the scrollbar TRACK must align with the outer boundaries of
	   the whole category navigation (= searchbar width), not just the gap
	   between the arrows. Negative horizontal margins extend the scroll
	   element's box under both arrow buttons (34px arrow + 8px gap per
	   side — component constants, width-independent), while equal padding
	   keeps the chip content visually between the arrows. The THUMB still
	   sizes naturally from the scrollable content. Vertical metrics and
	   the v3.0.17 arrow alignment are untouched. */
	margin: 0 -42px 8px;
	overflow-x: scroll;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 #eef2f6;
	/* v3.0.21: NO horizontal padding inside the scroller. In-scroller
	   padding made the native scrollbar render an extra leading track/
	   thumb segment (the "double scrollbar" look). The at-rest inset is
	   now carried by the first/last chip margins below, which scroll
	   with the content; the side masks keep clipping mid-scroll. */
	padding: 0 0 6px;
}
.unisolvino-tools .ust-dir-chips .ust-chip:first-child { margin-left: 42px; }
.unisolvino-tools .ust-dir-chips .ust-chip:last-child { margin-right: 42px; }
.unisolvino-tools .ust-dir-chips .ust-chip {
	flex: 0 0 auto;
	white-space: nowrap;
}
.unisolvino-tools .ust-dir-chips::-webkit-scrollbar { height: 6px; }
.unisolvino-tools .ust-dir-chips::-webkit-scrollbar-track { background: #eef2f6; border-radius: 999px; }
.unisolvino-tools .ust-dir-chips::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.unisolvino-tools .ust-chip {
	border: 1px solid var(--ust-border);
	background: var(--ust-surface);
	color: var(--ust-text);
	border-radius: 999px;
	padding: 7px 14px;
	font: inherit;
	font-size: .88rem;
	/* v3.0.17: deterministic single-line box (theme-line-height proof)
	   shared with the arrow buttons so both are exactly 36px tall. */
	line-height: 20px;
	cursor: pointer;
}
.unisolvino-tools .ust-chip-active {
	background: var(--ust-primary);
	border-color: var(--ust-primary);
	color: #fff;
}
.unisolvino-tools .ust-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.unisolvino-tools .ust-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--ust-surface);
	border: 1px solid var(--ust-border);
	border-radius: 12px;
	padding: 18px;
	color: var(--ust-text);
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.unisolvino-tools .ust-card:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	transform: translateY(-2px);
}
.unisolvino-tools .ust-card-icon {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	background: var(--ust-surface-alt);
	border: 1px solid var(--ust-border);
	border-radius: 10px;
}
.unisolvino-tools .ust-card-name {
	font-weight: 700;
}
.unisolvino-tools .ust-card-desc {
	color: var(--ust-muted);
	font-size: .88rem;
	flex: 1;
}
.unisolvino-tools .ust-card-link {
	color: var(--ust-primary);
	font-weight: 600;
	font-size: .9rem;
}
.unisolvino-tools .ust-dir-empty {
	text-align: center;
	color: var(--ust-muted);
	padding: 24px 0;
}

/* v3.0 Phase R — PHP-first server-rendered tool forms */
.ust-tool-server .ust-loading { opacity: .55; transition: opacity .15s ease; }
.ust-tool-server .ust-results { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }

/* v3.0.2 — directory pagination (URL-driven, server-side) */
.unisolvino-tools .ust-dir-searchwrap { display: block; }
.unisolvino-tools .ust-dir-chips .ust-chip {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}
.unisolvino-tools .ust-pagenav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
}
.unisolvino-tools .ust-page {
	display: inline-block;
	min-width: 2.2em;
	padding: 8px 12px;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--ust-border);
	border-radius: 8px;
	background: var(--ust-card, #fff);
	color: inherit;
	font-weight: 600;
	line-height: 1.2;
}
.unisolvino-tools a.ust-page:hover { border-color: var(--ust-primary); color: var(--ust-primary); }
.unisolvino-tools .ust-page-current {
	background: var(--ust-primary);
	border-color: var(--ust-primary);
	color: #fff;
}
.unisolvino-tools .ust-page-disabled { opacity: .45; cursor: default; }
.unisolvino-tools .ust-page-dots { padding: 8px 2px; color: var(--ust-muted); }
@media (max-width: 480px) {
	.unisolvino-tools .ust-page { padding: 7px 9px; min-width: 2em; }
}