/* ============================================================
   RIBBON MEDIA QUERIES
   Desktop ribbon stays untouched.
   Phone styles are now in mobile.css — this file only handles
   the desktop ribbon visibility and minor shared overrides.
   ============================================================ */

/* ── Phone / Tablet: hide desktop ribbon, rely on mobile.css ── */
@media only screen and (max-width: 1100px) {
	/* Ribbon is hidden — mobile.css provides the bottom nav */
	#ribbon {
		display: none !important;
	}

	#ribbon_shower {
		display: none !important;
	}

	/* Shared: responsive font scaling for remaining elements */
	body {
		font-size: calc(10px + 1vw);
	}

	div {
		font-size: calc(10px + 1vw);
	}

	input {
		font-size: calc(10px + 1vw);
	}

	/* Buttons */
	.add_layer {
		font-size: calc(10px + 1vw);
	}

	.remove_layer {
		font-size: calc(10px + 1vw);
	}

	.save_button {
		font-size: calc(10px + 1vw);
	}

	.show_data {
		font-size: calc(10px + 1vw);
	}

	.layer_type {
		width: auto;
		font-size: calc(10px + 1vw);
	}

	/* Symbol buttons */
	.symbol_button {
		font-size: 40px;
	}

	.close_button {
		width: 100%;
		font-size: 30px;
	}

	/* Tab list */
	#tablist {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.ui-tabs-nav {
		font-size: 30px;
	}

	/* Status bar hidden on phone */
	#status_bar {
		display: none !important;
	}

	/* FCNN not interactive on mobile */
	#fcnn {
		pointer-events: none;
	}

	.ribbon-toolbar {
		font-size: clamp(12px, 5vw, 25px);
	}
}

/* ── Desktop: ensure ribbon is visible, layers panel visible ── */
@media only screen and (min-width: 1101px) {
	#ribbon {
		display: block !important;
	}

	#ribbon_shower {
		display: none !important;
	}

	#toggle_layers_button {
		display: none;
	}
}