/*
 * Minimal shared reset and utilities.
 */

/* ============================================================
   1. Reset / base
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* The `hidden` attribute must beat the layout classes.
 *
 * `.tools-field` is `display: flex` and `.tools-field-grid` is `display: grid`:
 * both more specific than the browser's `[hidden] { display: none }`. Eight
 * page handlers hide a field by setting the attribute, and those fields stayed
 * on screen. `hidden` is document semantics, not a style, so here
 * !important is the right form and not a shortcut. */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	min-height: 100vh;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

body.tools-loading {
	cursor: wait;
}

div.bg-white.border-b.border-gray-200.shadow-sm.py-2.px-4 {
	margin-top: 60px;
}
div.max-w-7xl.mx-auto.px-4.py-6 {
	margin-top: 60px;
}

/* ============================================================
   2. Brand icon font (mficonset).
   Loaded here to be usable in every tier (public,
   monetized, private) without depending on /assets/fonts/mficonset/style.css
   (which uses relative paths and is loaded only for private).
   The webfonts live in /layout/fonts/mficonset/ - same source
   as the main site, no duplication.
   ============================================================ */
@font-face {
	font-family: 'mficonset';
	src: url('/layout/fonts/mficonset/mficonset.eot?7r61dx');
	src:
		url('/layout/fonts/mficonset/mficonset.eot?7r61dx#iefix') format('embedded-opentype'),
		url('/layout/fonts/mficonset/mficonset.ttf?7r61dx') format('truetype'),
		url('/layout/fonts/mficonset/mficonset.woff?7r61dx') format('woff'),
		url('/layout/fonts/mficonset/mficonset.svg?7r61dx#mficonset') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

[class^='mfficon-'],
[class*=' mfficon-'] {
	font-family: 'mficonset' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Composite 'mfc' glyph (Maurizio Fonte logo): 4 blue paths + 4 orange,
   stacked with a negative margin-left. Used in the header of the tools realm. */
.mfficon-mfc .path1:before {
	content: '\e900';
	color: rgb(0, 101, 192);
}
.mfficon-mfc .path2:before {
	content: '\e901';
	margin-left: -0.984375em;
	color: rgb(0, 101, 192);
}
.mfficon-mfc .path3:before {
	content: '\e902';
	margin-left: -0.984375em;
	color: rgb(0, 101, 192);
}
.mfficon-mfc .path4:before {
	content: '\e903';
	margin-left: -0.984375em;
	color: rgb(0, 101, 192);
}
.mfficon-mfc .path5:before {
	content: '\e904';
	margin-left: -0.984375em;
	color: rgb(194, 90, 0);
}
.mfficon-mfc .path6:before {
	content: '\e905';
	margin-left: -0.984375em;
	color: rgb(194, 90, 0);
}
.mfficon-mfc .path7:before {
	content: '\e906';
	margin-left: -0.984375em;
	color: rgb(194, 90, 0);
}
.mfficon-mfc .path8:before {
	content: '\e907';
	margin-left: -0.984375em;
	color: rgb(194, 90, 0);
}

/* ============================================================
   3. Copy icon stack: clipboard-copy (default) <-> clipboard-check (success).
   The delegated handler in _helpers.js applies `.is-copied` to the parent
   button for ~1.5s after a click; the two icons cross-fade. Hardcoded
   success color (#16a34a) so this works in every tier (public/monetized/
   private), independent of CSS custom-property scope.
   ============================================================ */
.tools-copy-icon {
	position: relative;
	display: inline-flex;
	line-height: 0;
	vertical-align: middle;
}
.tools-copy-icon__default,
.tools-copy-icon__check {
	display: inline-flex;
	line-height: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.tools-copy-icon__check {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(0.7);
	color: #16a34a;
}
.is-copied .tools-copy-icon__default {
	opacity: 0;
	transform: scale(0.7);
}
.is-copied .tools-copy-icon__check {
	opacity: 1;
	transform: scale(1);
}