/* StyleMZ Size Guide — monochrome, minimal, mobile-friendly */

/* Trigger ----------------------------------------------------------------- */
.stylemz-sg-trigger{
	display:inline-flex;align-items:center;gap:6px;
	margin:0 0 14px;padding:6px 2px;
	background:none;border:none;box-shadow:none;
	color:#333;font-size:13px;line-height:1.2;font-weight:500;letter-spacing:.02em;
	cursor:pointer;text-transform:none;
	border-bottom:1px solid #333;border-radius:0;
	transition:color .15s ease,border-color .15s ease;
	-webkit-appearance:none;appearance:none;min-height:auto;width:auto;
}
.stylemz-sg-trigger:hover{color:#666;border-color:#999;}
.stylemz-sg-trigger svg{display:block;flex:0 0 auto;}
/* when relocated next to the Size attribute row */
.stylemz-sg-trigger.is-inlabel{margin:0 0 0 10px;font-size:12px;vertical-align:middle;}

/* lock background scroll while the modal is open */
body.stylemz-sg-lock{overflow:hidden;}

/* Overlay ----------------------------------------------------------------- */
.stylemz-sg-overlay{
	position:fixed;inset:0;z-index:100000;
	display:flex;align-items:center;justify-content:center;
	padding:16px;
	background:rgba(0,0,0,.45);
	opacity:0;transition:opacity .18s ease;
	overflow:auto;
}
.stylemz-sg-overlay.is-open{opacity:1;}
.stylemz-sg-overlay[hidden]{display:none;}

/* Modal ------------------------------------------------------------------- */
.stylemz-sg-modal{
	width:100%;max-width:560px;max-height:88vh;
	display:flex;flex-direction:column;
	background:#fff;border:1px solid #eee;border-radius:8px;
	box-shadow:0 10px 40px rgba(0,0,0,.12);
	transform:translateY(8px);transition:transform .18s ease;
	overflow:hidden;
}
.stylemz-sg-overlay.is-open .stylemz-sg-modal{transform:translateY(0);}

.stylemz-sg-head{
	display:flex;align-items:flex-start;justify-content:space-between;
	padding:18px 20px;border-bottom:1px solid #eee;flex:0 0 auto;
}
.stylemz-sg-titles{min-width:0;}
.stylemz-sg-title{
	margin:0;font-size:16px;line-height:1.2;font-weight:600;color:#333;
	letter-spacing:.04em;text-transform:uppercase;
}
.stylemz-sg-sub{margin:4px 0 0;font-size:13px;color:#999;}
.stylemz-sg-close{
	flex:0 0 auto;width:36px;height:36px;margin:-6px -8px -6px 8px;
	background:none;border:none;box-shadow:none;cursor:pointer;
	font-size:26px;line-height:1;color:#999;border-radius:6px;
	transition:color .15s ease,background .15s ease;
	-webkit-appearance:none;appearance:none;
}
.stylemz-sg-close:hover{color:#333;background:#f5f5f5;}

.stylemz-sg-body{padding:18px 20px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* Unit toggle ------------------------------------------------------------- */
.stylemz-sg-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px;}
.stylemz-sg-units{display:inline-flex;border:1px solid #ddd;border-radius:6px;overflow:hidden;}
.stylemz-sg-units button{
	min-width:48px;padding:8px 12px;
	background:#fff;border:none;cursor:pointer;
	font-size:13px;font-weight:500;color:#666;
	transition:background .15s ease,color .15s ease;
	-webkit-appearance:none;appearance:none;
}
.stylemz-sg-units button + button{border-left:1px solid #ddd;}
.stylemz-sg-units button.is-active{background:#333;color:#fff;}

/* Table ------------------------------------------------------------------- */
.stylemz-sg-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #eee;border-radius:6px;}
.stylemz-sg-table{width:100%;border-collapse:collapse;font-size:14px;color:#333;background:#fff;}
.stylemz-sg-table th,.stylemz-sg-table td{
	padding:11px 14px;text-align:center;white-space:nowrap;
	border-bottom:1px solid #eee;
}
.stylemz-sg-table thead th{
	background:#fafafa;color:#666;font-weight:600;font-size:12px;
	letter-spacing:.04em;text-transform:uppercase;
}
.stylemz-sg-table tbody tr:last-child th,
.stylemz-sg-table tbody tr:last-child td{border-bottom:none;}
.stylemz-sg-table .stylemz-sg-sizecol{
	position:sticky;left:0;z-index:1;
	background:#fff;font-weight:600;text-align:left;
	border-right:1px solid #eee;
}
.stylemz-sg-table thead .stylemz-sg-sizecol{background:#fafafa;}

/* Unit visibility (modal carries sg-unit-cm / sg-unit-in) */
.stylemz-sg-modal .sg-in{display:none;}
.stylemz-sg-modal.sg-unit-in .sg-in{display:inline;}
.stylemz-sg-modal.sg-unit-in .sg-cm{display:none;}

.stylemz-sg-note{margin:12px 2px 0;font-size:12px;line-height:1.5;color:#999;}

/* How to measure ---------------------------------------------------------- */
.stylemz-sg-measure{margin-top:22px;padding-top:20px;border-top:1px solid #eee;}
.stylemz-sg-measure h3{
	margin:0 0 14px;font-size:12px;font-weight:600;color:#666;
	letter-spacing:.06em;text-transform:uppercase;
}
.stylemz-sg-measure-grid{display:flex;gap:20px;align-items:flex-start;}
.stylemz-sg-diagram{flex:0 0 150px;max-width:150px;}
.stylemz-sg-diagram svg{display:block;width:100%;height:auto;}
.stylemz-sg-legend{margin:0;padding:0;list-style:none;flex:1 1 auto;min-width:0;}
.stylemz-sg-legend li{margin:0 0 12px;}
.stylemz-sg-legend li:last-child{margin-bottom:0;}
.stylemz-sg-legend strong{display:block;font-size:13px;color:#333;margin-bottom:2px;}
.stylemz-sg-legend span{display:block;font-size:12px;line-height:1.5;color:#999;}

/* Mobile: bottom sheet ---------------------------------------------------- */
@media (max-width:600px){
	.stylemz-sg-overlay{align-items:flex-end;padding:0;}
	.stylemz-sg-modal{
		max-width:none;max-height:90vh;
		border-radius:14px 14px 0 0;border-bottom:none;
		transform:translateY(100%);
	}
	.stylemz-sg-overlay.is-open .stylemz-sg-modal{transform:translateY(0);}
	.stylemz-sg-head{padding:16px 18px;}
	.stylemz-sg-body{padding:16px 18px 26px;}
	.stylemz-sg-measure-grid{flex-direction:column;gap:16px;}
	.stylemz-sg-diagram{flex:0 0 auto;max-width:160px;margin:0 auto;}
	.stylemz-sg-units button{min-width:54px;padding:10px 14px;}
	.stylemz-sg-close{width:40px;height:40px;}
}