/* ============================================
   Tools - Common Styles
   Base: 1.5rem font-size, 2rem line-height, 2rem spacing
   All units in rem
   ============================================ */

/* Tools Grid (for tools listing page) */
.tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--space-8);
	margin-top: var(--space-8);
}

.tool-card {
	background-color: var(--black);
	padding: var(--space-6);
	border: var(--border-sm) solid var(--dark);
	transition: all var(--transition-md);
	text-align: center;
}

.tool-card:hover {
	border-color: var(--gray);
}

.tool-card h3 {
	color: var(--light);
	margin-bottom: var(--space-4);
	font-size: var(--font-md);
	line-height: var(--lh-md);
}

.tool-card p {
	color: var(--gray);
	font-size: var(--font-md);
	line-height: var(--lh-md);
	margin-bottom: var(--space-4);
}

.tool-card .btn {
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	color: var(--light);
	transition: all var(--transition-md);
	text-decoration: none;
	font-size: var(--font-md);
	line-height: var(--lh-md);
}

.tool-card .btn:hover {
	background-color: var(--gray);
}

.tool-card .btn:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
}

/* Tool Container (for individual tool pages) */
.tool-container {
	background-color: var(--black);
	padding: var(--space-8);
	border: var(--border-sm) solid var(--dark);
	margin-top: var(--space-8);
}

.tool-header {
	text-align: center;
	margin-bottom: var(--space-8);
}

.tool-header h1 {
	color: var(--light);
	font-size: var(--font-2xl);
	line-height: var(--lh-2xl);
	margin-bottom: var(--space-4);
}

.tool-header p {
	color: var(--gray);
	font-size: var(--font-md);
	line-height: var(--lh-md);
}

.tool-section {
	margin-bottom: var(--space-8);
}

.tool-section h2 {
	color: var(--light);
	font-size: var(--font-lg);
	line-height: var(--lh-lg);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-md) solid var(--dark);
}

/* Form Elements */
input[type="text"],
input[type="color"],
input[type="number"],
select,
textarea {
	width: 100%;
	padding: var(--space-4);
	border: var(--border-sm) solid var(--dark);
	font-size: var(--font-md);
	line-height: var(--lh-md);
	background-color: var(--black);
	color: var(--light);
	font-family: 'outfit', sans-serif;
	transition: all var(--transition-md);
}

input[type="text"]:focus,
input[type="color"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	outline: 0.125rem solid var(--gray);
	outline-offset: 0.125rem;
	border-color: var(--gray);
}

textarea {
	resize: vertical;
	min-height: 6rem;
}

/* Buttons */
.btn {
	display: inline-block;
	padding: var(--space-4) var(--space-6);
	background-color: var(--light);
	color: var(--black);
	border: none;
	cursor: pointer;
	font-size: var(--font-md);
	line-height: var(--lh-md);
	transition: all var(--transition-md);
	text-decoration: none;
}

.btn:hover {
	background-color: var(--white);
}

.btn:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
}

.btn-secondary {
	background-color: var(--dark);
	color: var(--light);
	border: var(--border-sm) solid var(--gray);
}

.btn-secondary:hover {
	background-color: var(--gray);
	color: var(--white);
}

.btn-group {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-4);
}

/* Back Link */
.back-link {
	display: inline-block;
	margin-bottom: var(--space-6);
	color: var(--light);
	text-decoration: underline;
	text-decoration-thickness: 0.08rem;
	text-underline-offset: 0.12rem;
	transition: all var(--transition-md);
	font-size: var(--font-md);
	line-height: var(--lh-md);
}

.back-link:hover {
	color: var(--color);
	text-underline-offset: 0.24rem;
	text-decoration-style: wavy;
}

.back-link:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
}

/* Utility Classes */
.mt-1 { margin-top: var(--space-4); }
.mt-2 { margin-top: var(--space-6); }
.mt-3 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-4); }
.mb-2 { margin-bottom: var(--space-6); }
.mb-3 { margin-bottom: var(--space-8); }

.hidden {
	display: none;
}

/* Tools Page Sections */
.tools-section {
	margin: var(--space-10) 0;
}

.tools-section:first-of-type {
	margin-top: var(--space-8);
}

.tools-section h2 {
	color: var(--light);
	font-size: var(--font-lg);
	line-height: var(--lh-lg);
	margin-top: 0;
	margin-bottom: var(--space-2);
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.tools-section h2 .emoji {
	font-family: 'emoji', sans-serif;
	font-size: 1.5em;
	line-height: 1;
}

/* Tools List (for tools and articles index pages) */
.tools-list,
.articles-list {
	margin-top: var(--space-8);
}

.tools-list li,
.articles-list li {
	list-style: none;
	margin-bottom: var(--space-4);
}

.tools-list li a,
.articles-list li a {
	display: inline;
	color: inherit;
	font-size: var(--font-md);
	line-height: var(--lh-md);
	text-decoration: underline;
	text-decoration-thickness: 0.08rem;
	text-underline-offset: 0.25rem;
	transition: all var(--transition-md);
}

.tools-list li a:hover,
.articles-list li a:hover {
	color: var(--color);
	text-underline-offset: 0.30rem;
	text-decoration-style: wavy;
}

.tools-list li a:focus,
.articles-list li a:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
}

.tools-list li a > *,
.articles-list li a > * {
	display: contents;
	vertical-align: baseline;
}

.tools-list .emoji,
.articles-list .emoji {
	font-family: 'emoji', sans-serif;
	font-weight: 640;
	font-size: var(--font-md);
	line-height: var(--lh-md);
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--space-2);
}

.tools-list strong,
.articles-list strong {
	color: inherit;
	font-weight: 500;
}

/* Data Table */
.data-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--space-4);
}

.data-table th,
.data-table td {
	padding: var(--space-4);
	text-align: left;
	border-bottom: var(--border-sm) solid var(--dark);
	color: var(--light);
	font-size: var(--font-md);
	line-height: var(--lh-md);
}

.data-table th {
	font-weight: 600;
	color: var(--light);
}

.data-table tr:hover {
}

.data-table .copy-btn {
	padding: var(--space-2) var(--space-4);
	font-size: var(--font-md);
}

.data-table .copy-btn:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
}

/* Symbols Grid */
.symbols-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.symbol-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-4);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.symbol-item:hover {
	background-color: var(--gray);
}

.symbol-item:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
}

.symbol-item .symbol {
	font-size: 1.75rem;
	margin-bottom: var(--space-1);
}

.symbol-item .code {
	font-size: var(--font-md);
	font-family: 'code', monospace;
	color: var(--light);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Articles Page Sections */
.articles-section {
	margin: var(--space-10) 0;
}

.articles-section:first-of-type {
	margin-top: var(--space-8);
}

.articles-section h2 {
	color: var(--light);
	font-size: var(--font-lg);
	line-height: var(--lh-lg);
	margin-top: 0;
	margin-bottom: var(--space-2);
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.articles-section h2 .emoji {
	font-family: 'emoji', sans-serif;
	font-size: 1.5em;
	line-height: 1;
}

.section-intro {
	color: var(--gray);
	font-size: var(--font-md);
	line-height: var(--lh-md);
	margin-bottom: var(--space-6);
}

/* Responsive */
@media screen and (max-width: 64rem) {
	.tools-grid {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

@media screen and (max-width: 40rem) {
	.tools-grid {
		grid-template-columns: 1fr;
	}
	
	.btn-group {
		flex-direction: column;
	}
	
	.btn {
		width: 100%;
		text-align: center;
	}
}