/*
 * All About HTML Tools — shared design system.
 *
 * Brand tokens are sampled from the live site logo
 * (allabouthtml-logo.png, 306x126, sampled 10 Nov 2026):
 *   --aah-crimson  #e62f41  most common logo pixel (bright red/crimson faces)
 *   --aah-magenta  #db529c  median of the magenta/pink-purple shading cluster
 *   --aah-crimson-dark is a 20% darkened hover shade derived from --aah-crimson.
 * Neutrals below are UI greys, not brand colours.
 * All rules are scoped under .aah-tool so nothing leaks into the theme.
 * Typography is inherited from the theme on purpose.
 */

.aah-tool {
	--aah-crimson: #e62f41;
	--aah-crimson-dark: #b81f2e;
	--aah-magenta: #db529c;
	--aah-ink: #232323;
	--aah-muted: #5c5c5c;
	--aah-border: #d9d9d9;
	--aah-bg: #ffffff;
	--aah-bg-soft: #fafafa;
	--aah-radius: 8px;

	box-sizing: border-box;
	max-width: 100%;
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: 1px solid var(--aah-border);
	border-radius: var(--aah-radius);
	background: var(--aah-bg);
	color: var(--aah-ink);
	font-family: inherit;
	line-height: 1.55;
}

.aah-tool *,
.aah-tool *::before,
.aah-tool *::after {
	box-sizing: border-box;
}

.aah-tool h2,
.aah-tool h3 {
	margin-top: 0;
}

.aah-tool label {
	display: block;
	font-weight: 600;
	margin: 0.75rem 0 0.25rem;
}

.aah-tool textarea,
.aah-tool input[type="text"],
.aah-tool input[type="url"],
.aah-tool input[type="number"],
.aah-tool select {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--aah-border);
	border-radius: 6px;
	background: var(--aah-bg);
	color: var(--aah-ink);
	font: inherit;
}

.aah-tool textarea {
	min-height: 140px;
	resize: vertical;
}

.aah-tool textarea:focus,
.aah-tool input:focus,
.aah-tool select:focus,
.aah-tool button:focus-visible {
	outline: 3px solid var(--aah-magenta);
	outline-offset: 2px;
}

.aah-tool button,
.aah-tool .aah-button {
	display: inline-block;
	margin: 0.75rem 0.5rem 0 0;
	padding: 0.6rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--aah-crimson);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.aah-tool button:hover,
.aah-tool .aah-button:hover {
	background: var(--aah-crimson-dark);
}

.aah-tool button.aah-button--secondary {
	background: var(--aah-bg);
	border-color: var(--aah-border);
	color: var(--aah-ink);
}

.aah-tool button.aah-button--secondary:hover {
	border-color: var(--aah-crimson);
	color: var(--aah-crimson);
}

/* Side-by-side layout: controls on the left, live
 * output on the right (Elementor-style), so the
 * visitor sees the output while choosing options
 * instead of scrolling down past them. On narrow
 * screens the columns stack. The output column
 * stretches to the row height; the live preview
 * panel inside it stays pinned to the top of the
 * viewport while the controls scroll, so the output
 * is always visible while choosing options. Only
 * the preview is pinned — the code boxes below it
 * scroll normally — because pinning the whole
 * output column leaves almost no room to stick
 * when the two columns are nearly the same height. */
.aah-tool .aah-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 768px) {
	.aah-tool .aah-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.aah-tool .aah-split__preview {
		position: sticky;
		/* The offset is measured live by the shared
		 * script (the bottom of the fixed/sticky
		 * header menu plus a gap) and set on the
		 * --aah-pin-top variable, so the panel pins
		 * below the header instead of sliding under
		 * it. The 16px fallback applies before the
		 * script runs or on a page with no header. */
		top: var(--aah-pin-top, 16px);
		z-index: 1;
		background: var(--aah-bg, #ffffff);
		padding-bottom: 8px;
		/* The panel never grows taller than the view
		 * area below the header: it fits its content
		 * by default, and only shows a scrollbar when
		 * the content overflows the viewport. Without
		 * this, a tall preview (the Color Picker's
		 * formats + actions + history) sticks/pins
		 * past the bottom of the viewport and the
		 * lower half is unreachable. The extra 16px
		 * leaves a gap at the bottom edge. */
		max-height: calc(100vh - var(--aah-pin-top, 16px) - 16px);
		overflow-y: auto;
	}

	/* When the JavaScript pin engages (the CSS
	 * sticky above does not, on this theme), the
	 * panel floats over the page — a soft shadow
	 * marks it as floating. */
	.aah-tool .aah-split__preview--pinned {
		box-shadow: 0 8px 24px rgba(35, 35, 35, 0.18);
		border-radius: var(--aah-radius, 8px);
		padding: 12px 16px;
	}
}

/* The "Pin preview" checkbox on a preview panel.
 * It sits at the right end of the panel's label
 * line. On narrow screens the columns stack and
 * there is no pinning, so the checkbox is hidden. */
.aah-pin-toggle {
	float: right;
	font-weight: 400;
	font-size: 0.85em;
	cursor: pointer;
	white-space: nowrap;
}

.aah-pin-toggle input {
	margin-right: 4px;
	vertical-align: middle;
	cursor: pointer;
}

@media (max-width: 767px) {
	.aah-pin-toggle {
		display: none;
	}
}

.aah-tool .aah-output {
	margin-top: 1rem;
	padding: 0.9rem 1rem;
	border-radius: 6px;
	background: var(--aah-bg-soft);
	border: 1px solid var(--aah-border);
}

.aah-tool .aah-output[aria-live] {
	min-height: 2.5rem;
}

.aah-tool .aah-note {
	color: var(--aah-muted);
	font-size: 0.9em;
}

.aah-tool--error {
	border-color: var(--aah-crimson);
}

.aah-tool--error p {
	margin: 0;
}

.aah-tool .aah-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

@media (max-width: 600px) {
	.aah-tool {
		padding: 1rem;
	}

	.aah-tool button,
	.aah-tool .aah-button {
		width: 100%;
		margin-right: 0;
		text-align: center;
	}
}