/**
 * SurveyFlow Responsive & Outdoor Viewing CSS
 * Enhancements for sunlight visibility, smartphone form factor, and touch precision.
 */

@media (max-width: 768px) {
	.sf-public-wrap {
		margin: 10px auto;
		padding: 0 10px;
	}

	.sf-surveyor-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 10px 12px;
	}

	.sf-nav-brand {
		justify-content: space-between;
		width: 100%;
	}

	.sf-nav-links {
		width: 100%;
		justify-content: space-between;
		gap: 6px;
	}

	.sf-nav-link {
		padding: 8px 10px;
		font-size: 12px;
		flex: 1;
		justify-content: center;
	}

	.sf-top-bar {
		padding: 16px;
	}

	.sf-top-actions {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.sf-top-actions .sf-btn-gold {
		grid-column: 1 / -1;
	}

	.sf-metrics-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.sf-metric-card {
		padding: 12px 10px;
	}

	.sf-metric-title {
		font-size: 11px;
	}

	.sf-metric-value {
		font-size: 20px;
	}

	.sf-metric-subtext {
		display: none;
	}

	.sf-step-card {
		padding: 16px;
	}

	.sf-step-name {
		display: none;
	}

	.sf-input,
	.sf-select,
	.sf-textarea {
		font-size: 16px; /* Prevents auto-zoom on iOS Safari */
		min-height: 48px;
	}

	.sf-table {
		font-size: 12px;
	}

	.sf-table th,
	.sf-table td {
		padding: 8px 6px;
	}
}

@media (max-width: 480px) {
	.sf-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* High Contrast Outdoor Mode */
@media (prefers-contrast: more) {
	.sf-input,
	.sf-select,
	.sf-textarea {
		border-width: 2px;
		border-color: #000000;
	}

	.sf-btn {
		border-width: 2px;
	}
}